﻿/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   鍓嶅彴鍟嗗搧璇︽儏缁勪欢搴?V4 鈥?浼佷笟绾ц璁＄郴缁?   鎵€鏈夎鍒欓檺瀹氬湪 .product-detail 浣滅敤鍩熷唴
   鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/

/* 鈹€鈹€ 鍩虹鎺掔増 鈹€鈹€ */
.product-detail { color: var(--text-secondary,#374151); line-height: 1.75; font-size: var(--fs-base,1rem); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; word-break: break-word; overflow-x: hidden; }
.product-detail a { word-break: break-all; overflow-wrap: anywhere; max-width: 100%; }
.product-detail h2 {
    font-size: var(--fs-xl,1.25rem); font-weight: var(--fw-bold,700); color: var(--text-primary,#111827);
    margin: 3rem 0 1rem; padding-bottom: .75rem;
    border-bottom: 1px solid #e5e7eb; letter-spacing: -.02em;
}
.product-detail h2:first-child { margin-top: 0; }
.product-detail h3 { font-size: var(--fs-md,1.0625rem); font-weight: var(--fw-semibold,600); color: var(--text-primary,#111827); margin: 2rem 0 .5rem; }
.product-detail p { margin: .5rem 0; color: var(--text-tertiary,#4b5563); line-height: 1.75; }
.product-detail img { border-radius: .5rem; max-width: 100%; height: auto; display: block; }

/* 鈹€鈹€ 1. pd-intro 鈹€鈹€ */
.product-detail .pd-intro {
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .75rem;
    padding: 2.5rem 2rem; margin: 1.5rem 0; text-align: center;
}
.product-detail .pd-intro h2 {
    border: none; margin: 0 0 .5rem; padding: 0;
    color: #111827; font-size: 1.5rem; font-weight: 700;
}
.product-detail .pd-intro p { color: #6b7280; font-size: .9375rem; margin: .25rem 0; }

/* 鈹€鈹€ 2. pd-badges 鈹€鈹€ */
.product-detail .pd-badges { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
.product-detail .pd-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .75rem; border-radius: 9999px;
    font-size: .75rem; font-weight: 500;
    background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb;
}
.product-detail .pd-badge-green  { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.product-detail .pd-badge-orange { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.product-detail .pd-badge-purple { background: #faf5ff; color: #6b21a8; border-color: #e9d5ff; }
.product-detail .pd-badge-red    { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* 鈹€鈹€ 3. feat-grid 鈹€鈹€ */
.product-detail .feat-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 1rem !important; margin: 1.5rem 0; }
.product-detail .feat-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem;
    padding: 1.25rem !important; transition: border-color .15s ease;
}
.product-detail .feat-card:hover { border-color: #d1d5db; }
.product-detail .feat-card strong { display: block; font-size: .875rem; color: #111827; margin-bottom: .25rem; line-height: 1.5; }
.product-detail .feat-card span { font-size: .8125rem; color: #6b7280; line-height: 1.6; display: block; }

/* 鈹€鈹€ 4. pd-feat-row 鈹€鈹€ */
.product-detail .pd-feat-row {
    display: flex; gap: 2rem; align-items: center;
    margin: 2rem 0; padding: 2rem;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .75rem;
}
.product-detail .pd-feat-row.pd-reverse { flex-direction: row-reverse; }
.product-detail .pd-feat-img { flex: 0 0 45%; }
.product-detail .pd-feat-img img { width: 100%; border-radius: .5rem; border: 1px solid #e5e7eb; }
.product-detail .pd-feat-text { flex: 1; }
.product-detail .pd-feat-text h3 { margin-top: 0; color: #111827; font-size: 1.0625rem; }
.product-detail .pd-feat-text p { font-size: .875rem; color: #4b5563; }
.product-detail .pd-feat-text ul { padding-left: 1.25rem; margin: .75rem 0; }
.product-detail .pd-feat-text ul li { font-size: .8125rem; color: #4b5563; padding: .25rem 0; line-height: 1.6; list-style-type: disc; }

/* 鈹€鈹€ 5. pd-advantages 鈹€鈹€ */
.product-detail .pd-advantages { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin: 1.5rem 0; }
.product-detail .pd-adv-item {
    text-align: center; padding: 1.5rem 1rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem;
    transition: border-color .15s ease;
}
.product-detail .pd-adv-item:hover { border-color: #d1d5db; }
.product-detail .pd-adv-icon {
    display: flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; margin: 0 auto .75rem;
    background: #f3f4f6; border-radius: .5rem; font-size: 1.25rem;
}
.product-detail .pd-adv-title { font-weight: 600; font-size: .875rem; color: #111827; display: block; }
.product-detail .pd-adv-desc { font-size: .8125rem; color: #6b7280; margin-top: .25rem; display: block; line-height: 1.5; }

/* 鈹€鈹€ 6. ss-grid 鈹€鈹€ */
.product-detail .ss-grid { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 1rem !important; margin: 1.5rem 0; }
.product-detail .ss-item {
    background: #fff; border-radius: .75rem; overflow: hidden;
    border: 1px solid #e5e7eb; transition: border-color .15s ease;
}
.product-detail .ss-item:hover { border-color: #d1d5db; }
.product-detail .ss-item img { width: 100% !important; aspect-ratio: 16/10; object-fit: cover; border-radius: 0; }
.product-detail .ss-item .ss-cap { padding: .75rem 1rem; }
.product-detail .ss-item .ss-cap strong { display: block; font-size: .8125rem; color: #111827; margin-bottom: .125rem; }
.product-detail .ss-item .ss-cap span { font-size: .75rem; color: #6b7280; line-height: 1.5; }

/* 鈹€鈹€ 7. step-list 鈹€鈹€ */
.product-detail .step-list { counter-reset: step; list-style: none; padding: 0 0 0 1rem; margin: 1.5rem 0; }
.product-detail .step-list li {
    counter-increment: step; position: relative;
    padding: 1rem 0 1rem 3rem; border-left: 1px solid #e5e7eb;
    font-size: .875rem; color: #374151;
}
.product-detail .step-list li:last-child { border-left-color: transparent; padding-bottom: 0; }
.product-detail .step-list li::before {
    content: counter(step); position: absolute; left: -.875rem; top: .875rem;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: #111827; color: #fff; font-size: .75rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.product-detail .step-list li strong { color: #111827; }

/* 鈹€鈹€ 8. num-highlight 鈹€鈹€ */
.product-detail .num-highlight { display: flex; gap: 1rem; margin: 1.5rem 0; }
.product-detail .num-item {
    flex: 1; text-align: center; padding: 1.5rem .75rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem;
}
.product-detail .num-val { display: block; font-size: 2rem; font-weight: 700; color: #111827; line-height: 1.2; }
.product-detail .num-label { display: block; font-size: .75rem; color: #6b7280; margin-top: .375rem; font-weight: 500; }

/* 鈹€鈹€ 9. pd-faq 鈹€鈹€ */
.product-detail .pd-faq { margin: 1.5rem 0; }
.product-detail .pd-faq-item {
    border: 1px solid #e5e7eb; border-radius: .75rem;
    margin-bottom: .75rem; overflow: hidden;
}
.product-detail .pd-faq-q {
    background: #f9fafb; padding: 1rem 1.25rem 1rem 3rem;
    font-weight: 600; font-size: .875rem; color: #111827; position: relative;
}
.product-detail .pd-faq-q::before {
    content: 'Q'; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    width: 1.375rem; height: 1.375rem; border-radius: .25rem;
    background: #111827; color: #fff; font-size: .625rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.product-detail .pd-faq-a {
    padding: 1rem 1.25rem 1rem 3rem;
    font-size: .8125rem; color: #4b5563; line-height: 1.75; position: relative;
}
.product-detail .pd-faq-a::before {
    content: 'A'; position: absolute; left: 1rem; top: 1rem;
    width: 1.375rem; height: 1.375rem; border-radius: .25rem;
    background: #f3f4f6; border: 1px solid #e5e7eb;
    color: #6b7280; font-size: .625rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* 鈹€鈹€ 10. pd-changelog 鈹€鈹€ */
.product-detail .pd-changelog { margin: 1.5rem 0; }
.product-detail .pd-log-item { display: flex; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid #f3f4f6; align-items: baseline; }
.product-detail .pd-log-item:last-child { border-bottom: none; }
.product-detail .pd-log-ver {
    flex-shrink: 0; font-weight: 600; font-size: .75rem;
    background: #f3f4f6; color: #374151; padding: .25rem .625rem;
    border-radius: .25rem; border: 1px solid #e5e7eb;
}
.product-detail .pd-log-date { flex-shrink: 0; color: #9ca3af; font-size: .75rem; min-width: 5.5rem; }
.product-detail .pd-log-text { color: #374151; font-size: .8125rem; line-height: 1.6; }

/* 鈹€鈹€ 11. pd-reviews 鈹€鈹€ */
.product-detail .pd-reviews { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin: 1.5rem 0; }
.product-detail .pd-review {
    background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1.5rem;
    position: relative;
}
.product-detail .pd-review::before {
    content: '\201C'; position: absolute; top: .75rem; right: 1rem;
    font-size: 3rem; color: #e5e7eb; font-family: Georgia, serif; line-height: 1;
}
.product-detail .pd-review-stars { color: #f59e0b; font-size: .875rem; margin-bottom: .5rem; letter-spacing: 2px; }
.product-detail .pd-review-text { font-size: .8125rem; color: #374151; line-height: 1.75; margin-bottom: .5rem; position: relative; }
.product-detail .pd-review-user { font-size: .75rem; color: #9ca3af; font-weight: 600; }

/* 鈹€鈹€ 12. pd-specs 鈹€鈹€ */
.product-detail .pd-specs { margin: 1.5rem 0; border: 1px solid #e5e7eb; border-radius: .75rem; overflow: hidden; }
.product-detail .pd-spec-row { display: flex; border-bottom: 1px solid #f3f4f6; }
.product-detail .pd-spec-row:last-child { border-bottom: none; }
.product-detail .pd-spec-row:nth-child(even) { background: #f9fafb; }
.product-detail .pd-spec-label {
    flex: 0 0 35%; padding: .75rem 1rem; background: #f9fafb;
    font-weight: 600; font-size: .8125rem; color: #374151; border-right: 1px solid #f3f4f6;
}
.product-detail .pd-spec-value { flex: 1; padding: .75rem 1rem; font-size: .8125rem; color: #4b5563; }

/* 鈹€鈹€ 13. vs-table 鈹€鈹€ */
.product-detail table.vs-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    border-radius: .75rem; overflow: hidden;
    border: 1px solid #e5e7eb; margin: 1.5rem 0;
}
.product-detail table.vs-table th {
    background: #f9fafb; font-size: .8125rem; font-weight: 600; color: #374151;
    padding: .875rem 1rem; text-align: left; border-bottom: 1px solid #e5e7eb;
}
.product-detail table.vs-table td { font-size: .8125rem; color: #4b5563; padding: .75rem 1rem; border-bottom: 1px solid #f3f4f6; }
.product-detail table.vs-table tr:last-child td { border-bottom: none; }
.product-detail table.vs-table tr:nth-child(even) td { background: #f9fafb; }
.product-detail table.vs-table .highlight { background: #f0fdf4 !important; color: #166534; font-weight: 600; }

/* 鈹€鈹€ 14. 鎻愮ず妗?鈹€鈹€ */
.product-detail .info-box, .product-detail .warn-box, .product-detail .ok-box {
    border-radius: .75rem; padding: 1rem 1.25rem 1rem 3rem !important;
    margin: 1.5rem 0; position: relative; border-left: 3px solid;
}
.product-detail .info-box::before, .product-detail .warn-box::before, .product-detail .ok-box::before {
    position: absolute; left: 1rem; top: 1.125rem;
    font-size: .875rem; display: flex; align-items: center; justify-content: center;
}
.product-detail .info-box { background: #eff6ff !important; border-color: #e5e7eb; border-left-color: #3b82f6; }
.product-detail .info-box::before { content: '\2139'; color: #3b82f6; }
.product-detail .info-box strong { color: #1e40af; }
.product-detail .info-box p { color: #1e3a5f; margin: .25rem 0; font-size: .875rem; line-height: 1.75; }
.product-detail .warn-box { background: #fffbeb !important; border-color: #f3f4f6; border-left-color: #d97706; }
.product-detail .warn-box::before { content: '\26A0'; color: #d97706; }
.product-detail .warn-box strong { color: #92400e; }
.product-detail .warn-box p { color: #78350f; margin: .25rem 0; font-size: .875rem; line-height: 1.75; }
.product-detail .ok-box { background: #f0fdf4 !important; border-color: #f3f4f6; border-left-color: #16a34a; }
.product-detail .ok-box::before { content: '\2713'; color: #16a34a; font-weight: 700; }
.product-detail .ok-box strong { color: #166534; }
.product-detail .ok-box p { color: #14532d; margin: .25rem 0; font-size: .875rem; line-height: 1.75; }
.product-detail .info-box p:first-child, .product-detail .warn-box p:first-child, .product-detail .ok-box p:first-child { margin-top: 0; }
.product-detail .info-box p:last-child, .product-detail .warn-box p:last-child, .product-detail .ok-box p:last-child { margin-bottom: 0; }

/* 鈹€鈹€ 15. SVG 鍥炬爣 鈹€鈹€ */
.product-detail .pd-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; flex-shrink: 0;
    background-size: 1.125rem; background-repeat: no-repeat; background-position: center;
}
.product-detail .pd-icon-lg { width: 2.5rem; height: 2.5rem; background-size: 1.375rem; }
.product-detail .pd-icon-zap       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 10 10-12h-9l1-10z'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-shield    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-refresh   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-users     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-target    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-clock     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-check     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23166534' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-star      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-download  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-settings  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-cpu       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M15 2v2M15 20v2M2 15h2M2 9h2M20 15h2M20 9h2M9 2v2M9 20v2'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-layers    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.84Z'/%3E%3Cpath d='m22.18 12.09-8.58 3.91a2 2 0 0 1-1.66 0L2.6 12.09'/%3E%3Cpath d='m22.18 16.09-8.58 3.91a2 2 0 0 1-1.66 0L2.6 16.09'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-trending  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-lock      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-play      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m10 8 6 4-6 4V8z'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-globe     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-copy      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-image     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-message   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); }
.product-detail .pd-icon-sparkles  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.9 5.8a2 2 0 0 1-1.287 1.288L3 12l5.8 1.9a2 2 0 0 1 1.288 1.287L12 21l1.9-5.8a2 2 0 0 1 1.287-1.288L21 12l-5.8-1.9a2 2 0 0 1-1.288-1.287Z'/%3E%3C/svg%3E"); }
.product-detail .feat-card .pd-icon, .product-detail .pd-adv-item .pd-icon {
    margin-bottom: .5rem; background-color: #f3f4f6; border-radius: .5rem; width: 2.5rem; height: 2.5rem;
}

/* 鈹€鈹€ 16. 瑙嗛瀹瑰櫒 鈹€鈹€ */
.product-detail .pd-video-wrap {
    position: relative; margin: 1.5rem 0; border-radius: .75rem;
    overflow: hidden; border: 1px solid #e5e7eb;
}
.product-detail .pd-video-wrap video { width: 100%; display: block; }

/* 鈹€鈹€ 17. pd-checklist 鈹€鈹€ */
.product-detail .pd-checklist {
    list-style: none; padding: 0; margin: 1.5rem 0;
    display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem;
}
.product-detail .pd-checklist li {
    position: relative;
    padding: .875rem 1rem .875rem 2.625rem;
    font-size: .8125rem; color: #6b7280; line-height: 1.6;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: .625rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.product-detail .pd-checklist li:hover { border-color: #86efac; box-shadow: 0 2px 8px rgba(22,163,74,.1); background: #f7fffe; }
.product-detail .pd-checklist li::before {
    content: ''; position: absolute; left: .875rem; top: .9375rem;
    width: 1.125rem; height: 1.125rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23dcfce7' stroke='%2316a34a' stroke-width='1.5'/%3E%3Cpath d='m6.5 10 2.5 2.5 4.5-5' stroke='%23166534' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}
.product-detail .pd-checklist li strong {
    display: block;
    color: #15803d; font-weight: 700; font-size: .875rem;
    margin-bottom: .3rem; line-height: 1.35;
}

/* 鈹€鈹€ 18. pd-stat-strip 鈹€鈹€ */
.product-detail .pd-stat-strip {
    display: flex; gap: 0; margin: 1.5rem 0;
    background: #111827; border-radius: .75rem;
    padding: 1.5rem; color: #fff;
}
.product-detail .pd-stat-strip .pd-stat {
    flex: 1; text-align: center; position: relative;
    border-right: 1px solid rgba(255,255,255,.1);
}
.product-detail .pd-stat-strip .pd-stat:last-child { border-right: none; }
.product-detail .pd-stat-strip .pd-stat-val { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.product-detail .pd-stat-strip .pd-stat-label { display: block; font-size: .75rem; opacity: .6; margin-top: .25rem; font-weight: 500; }

/* 鈹€鈹€ 19. pd-pricing 鈹€鈹€ */
.product-detail .pd-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.product-detail .pd-price-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem;
    padding: 2rem 1.5rem; text-align: center; position: relative;
    transition: border-color .15s ease;
}
.product-detail .pd-price-card:hover { border-color: #d1d5db; }
.product-detail .pd-price-card.pd-popular { border-color: #111827; border-width: 2px; }
.product-detail .pd-price-card.pd-popular::before {
    content: '\63A8\8350'; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    padding: .125rem .75rem; background: #111827; color: #fff;
    font-size: .6875rem; font-weight: 600; border-radius: 0 0 .375rem .375rem;
}
.product-detail .pd-price-label { font-size: .875rem; font-weight: 600; color: #374151; display: block; margin-bottom: .5rem; }
.product-detail .pd-price-amount { font-size: 2.25rem; font-weight: 700; color: #111827; display: block; line-height: 1.2; margin-bottom: .25rem; }
.product-detail .pd-price-amount small { font-size: .875rem; font-weight: 400; color: #6b7280; }
.product-detail .pd-price-period { font-size: .75rem; color: #9ca3af; display: block; margin-bottom: 1rem; }
.product-detail .pd-price-features { list-style: none; padding: 0; margin: 0 0 1.5rem; text-align: left; }
.product-detail .pd-price-features li {
    padding: .375rem 0 .375rem 1.5rem; font-size: .8125rem; color: #4b5563;
    position: relative; border-bottom: 1px solid #f9fafb;
}
.product-detail .pd-price-features li::before { content: '\2713'; position: absolute; left: 0; color: #16a34a; font-weight: 600; }

/* 鈹€鈹€ 20. pd-timeline 鈹€鈹€ */
.product-detail .pd-timeline { position: relative; padding-left: 2rem; margin: 1.5rem 0; }
.product-detail .pd-timeline::before {
    content: ''; position: absolute; left: .5rem; top: 0; bottom: 0;
    width: 1px; background: #e5e7eb;
}
.product-detail .pd-tl-item { position: relative; padding: .75rem 0 1.5rem 1.5rem; }
.product-detail .pd-tl-item::before {
    content: ''; position: absolute; left: -1.625rem; top: 1rem;
    width: .5rem; height: .5rem; border-radius: 50%;
    background: #111827; border: 2px solid #e5e7eb; box-shadow: 0 0 0 3px #fff;
}
.product-detail .pd-tl-date { font-size: .75rem; color: #9ca3af; font-weight: 500; display: block; margin-bottom: .25rem; }
.product-detail .pd-tl-title { font-size: .875rem; font-weight: 600; color: #111827; display: block; margin-bottom: .25rem; }
.product-detail .pd-tl-text { font-size: .8125rem; color: #4b5563; line-height: 1.6; }

/* 鈹€鈹€ 21. pd-quote 鈹€鈹€ */
.product-detail .pd-quote {
    margin: 2rem 0; padding: 1.5rem 1.5rem 1.5rem 2rem;
    background: #f9fafb; border-left: 3px solid #d1d5db;
    border-radius: 0 .75rem .75rem 0;
}
.product-detail .pd-quote p { font-size: .9375rem; color: #374151; line-height: 1.75; font-style: italic; margin: 0; }
.product-detail .pd-quote-author { display: block; margin-top: .75rem; font-size: .8125rem; color: #6b7280; font-style: normal; font-weight: 600; }

/* 鈹€鈹€ 22. pd-accordion 鈹€鈹€ */
.product-detail .pd-accordion { margin: 1.5rem 0; }
.product-detail .pd-accordion details {
    border: 1px solid #e5e7eb; border-radius: .75rem;
    margin-bottom: .5rem; overflow: hidden;
}
.product-detail .pd-accordion summary {
    padding: .875rem 2.5rem .875rem 1rem; font-weight: 600;
    font-size: .875rem; color: #111827; cursor: pointer;
    background: #f9fafb; position: relative;
    list-style: none; -webkit-appearance: none; appearance: none;
}
.product-detail .pd-accordion summary::-webkit-details-marker { display: none; }
.product-detail .pd-accordion summary::after {
    content: '+'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1.125rem; color: #9ca3af; font-weight: 400;
}
.product-detail .pd-accordion details[open] summary::after { content: '\2212'; }
.product-detail .pd-accordion details > div,
.product-detail .pd-accordion details > p {
    padding: .875rem 1rem; font-size: .8125rem; color: #4b5563; line-height: 1.75;
}

/* 鈹€鈹€ 23. pd-progress 鈹€鈹€ */
.product-detail .pd-progress-group { margin: 1.5rem 0; }
.product-detail .pd-progress-item { margin-bottom: 1rem; }
.product-detail .pd-progress-header { display: flex; justify-content: space-between; margin-bottom: .25rem; }
.product-detail .pd-progress-name { font-size: .8125rem; font-weight: 600; color: #374151; }
.product-detail .pd-progress-val { font-size: .8125rem; font-weight: 600; color: #111827; }
.product-detail .pd-progress-bar { height: .375rem; background: #f3f4f6; border-radius: 9999px; overflow: hidden; }
.product-detail .pd-progress-fill { height: 100%; border-radius: 9999px; background: #111827; transition: width .6s cubic-bezier(.4,0,.2,1); }

/* 鈹€鈹€ 24. pd-versus 鈹€鈹€ */
.product-detail .pd-versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; margin: 1.5rem 0; align-items: stretch; }
.product-detail .pd-vs-card {
    background: #fff; border: 1px solid #e5e7eb; padding: 1.5rem;
    transition: border-color .15s ease;
}
.product-detail .pd-vs-card:first-child { border-radius: .75rem 0 0 .75rem; }
.product-detail .pd-vs-card:last-child { border-radius: 0 .75rem .75rem 0; }
.product-detail .pd-vs-card:hover { border-color: #d1d5db; }
.product-detail .pd-vs-card.pd-vs-win { border-color: #16a34a; background: #f0fdf4; }
.product-detail .pd-vs-divider {
    display: flex; align-items: center; justify-content: center;
    padding: 0 1rem; font-size: .875rem; font-weight: 700; color: #9ca3af;
    background: #f9fafb; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
}
.product-detail .pd-vs-title { font-weight: 600; font-size: 1rem; color: #111827; display: block; margin-bottom: .75rem; }

/* 鈹€鈹€ 25. pd-gradient-card 鈹€鈹€ */
.product-detail .pd-gradient-card {
    border-radius: .75rem; padding: 2rem; margin: 1.5rem 0;
    color: #fff; position: relative; overflow: hidden;
}
.product-detail .pd-gradient-card.pd-gc-blue { background: #1e3a5f; }
.product-detail .pd-gradient-card.pd-gc-purple { background: #312e81; }
.product-detail .pd-gradient-card.pd-gc-green { background: #14532d; }
.product-detail .pd-gradient-card.pd-gc-dark { background: #111827; }
.product-detail .pd-gradient-card h2, .product-detail .pd-gradient-card h3 { color: #fff; border: none; margin-top: 0; }
.product-detail .pd-gradient-card p { color: rgba(255,255,255,.75); }

/* 鈹€鈹€ 26. pd-feature-list 鈹€鈹€ */
.product-detail .pd-feature-list { margin: 1.5rem 0; }
.product-detail .pd-fl-item {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1rem 0; border-bottom: 1px solid #f3f4f6;
}
.product-detail .pd-fl-item:last-child { border-bottom: none; }
.product-detail .pd-fl-icon {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem;
    background: #f3f4f6; border-radius: .5rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.125rem;
}
.product-detail .pd-fl-content { flex: 1; }
.product-detail .pd-fl-content strong { display: block; font-size: .875rem; color: #111827; margin-bottom: .125rem; }
.product-detail .pd-fl-content span { font-size: .8125rem; color: #6b7280; line-height: 1.6; display: block; }

/* 鈹€鈹€ 27. pd-mark 鈹€鈹€ */
.product-detail .pd-mark { background: #fef3c7; padding: .0625rem .375rem; border-radius: .25rem; font-weight: 600; color: #92400e; }
.product-detail .pd-mark-blue { background: #e0e7ff; color: #3730a3; }
.product-detail .pd-mark-green { background: #d1fae5; color: #065f46; }

/* 鈹€鈹€ 28. pd-cols 鈹€鈹€ */
.product-detail .pd-cols { display: grid; gap: 1.5rem; margin: 1.5rem 0; }
.product-detail .pd-cols-2 { grid-template-columns: 1fr 1fr; }
.product-detail .pd-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.product-detail .pd-col { padding: 1.5rem; background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; }

/* 鈹€鈹€ 29. CTA + 鍒嗛殧绾?鈹€鈹€ */
.product-detail .pd-center { text-align: center; }
.product-detail .cta-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .875rem 2.5rem; background: #111827;
    color: #fff !important; font-weight: 600; font-size: .9375rem;
    border-radius: .5rem; text-decoration: none; margin: 1rem 0;
    transition: background .15s ease;
}
.product-detail .cta-btn:hover { background: #1f2937; }
.product-detail .cta-btn-green { background: #166534; }
.product-detail .cta-btn-green:hover { background: #14532d; }
.product-detail .cta-btn-dark { background: #111827; }
.product-detail .divider-fancy {
    display: flex; align-items: center; gap: 1rem;
    margin: 2.5rem 0; color: #d1d5db; font-size: .75rem; letter-spacing: 3px; text-transform: uppercase;
}
.product-detail .divider-fancy::before, .product-detail .divider-fancy::after {
    content: ''; flex: 1; height: 1px; background: #e5e7eb;
}

/* 鈹€鈹€ 30. pd-highlights 鈹€鈹€ */
.product-detail .pd-highlights {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem; margin: 1.5rem 0;
}
.product-detail .pd-hl-item {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.25rem; background: #fff;
    border: 1px solid #e5e7eb; border-radius: .75rem;
}
.product-detail .pd-hl-val {
    font-size: 1.375rem; font-weight: 700; line-height: 1.2;
    color: #111827; white-space: nowrap; flex-shrink: 0;
}
.product-detail .pd-hl-text { font-size: .8125rem; color: #6b7280; line-height: 1.4; font-weight: 500; }

/* 鈹€鈹€ 31. 鍝嶅簲寮?鈹€鈹€ */
@media (max-width: 768px) {
    .product-detail .feat-grid { grid-template-columns: repeat(2,1fr) !important; }
    .product-detail .pd-advantages { grid-template-columns: repeat(2,1fr); }
    .product-detail .pd-feat-row, .product-detail .pd-feat-row.pd-reverse { flex-direction: column; }
    .product-detail .pd-feat-img { flex: none; }
    .product-detail .ss-grid { grid-template-columns: 1fr !important; }
    .product-detail .pd-reviews { grid-template-columns: 1fr; }
    .product-detail .pd-pricing { grid-template-columns: 1fr; }
    .product-detail .pd-versus { grid-template-columns: 1fr; }
    .product-detail .pd-vs-card:first-child { border-radius: .75rem .75rem 0 0; }
    .product-detail .pd-vs-card:last-child { border-radius: 0 0 .75rem .75rem; }
    .product-detail .pd-vs-divider { padding: .75rem; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; border-top: none; border-bottom: none; }
    .product-detail .num-highlight { flex-wrap: wrap; }
    .product-detail .num-item { flex: 0 0 calc(50% - .5rem); }
    .product-detail .pd-stat-strip { flex-wrap: wrap; }
    .product-detail .pd-stat-strip .pd-stat { flex: 0 0 50%; border-right: none; padding: .5rem 0; }
    .product-detail .pd-cols-2, .product-detail .pd-cols-3 { grid-template-columns: 1fr; }
    .product-detail .pd-highlights { grid-template-columns: repeat(2, 1fr); }
    .product-detail h2 { margin: 2rem 0 .75rem; }
    .product-detail .pd-checklist { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .product-detail .pd-checklist { gap: .5rem; }
    .product-detail .pd-checklist li { padding: .75rem .875rem .75rem 2.375rem; }
    .product-detail .pd-checklist li::before { left: .75rem; top: .8125rem; }
    .product-detail .pd-checklist li strong { font-size: .8125rem; margin-bottom: .2rem; }
    .product-detail .feat-grid { grid-template-columns: repeat(2,1fr) !important; gap: .625rem !important; }
    .product-detail .feat-card { padding: .875rem !important; }
    .product-detail .feat-card strong { font-size: .8125rem; }
    .product-detail .feat-card span { font-size: .75rem; }
    .product-detail .pd-advantages { grid-template-columns: 1fr; }
    .product-detail .pd-price-amount { font-size: 1.75rem; }
    .product-detail .pd-highlights { grid-template-columns: 1fr; }
    .product-detail .pd-intro { padding: 1.5rem 1rem; }
    .product-detail .pd-stat-strip .pd-stat { flex: 0 0 100%; }
    .product-detail .info-box, .product-detail .warn-box, .product-detail .ok-box { padding: .875rem 1rem .875rem 2.5rem !important; }
    .product-detail .info-box::before, .product-detail .warn-box::before, .product-detail .ok-box::before { left: .75rem; top: .9375rem; font-size: .8125rem; }
}
