#photoUrlList_03fed688a6144186a5ea340da352cd47 .lead_swiper_container{
                --swiper_wrapperWidth: 100%;
                --swiper_main_ratio: 1 / 1;
                --swiper_main_width: 100%;
                --swiper_thumb_align: start;
                --swiper_thumb_gap: 20px;
                --swiper_thumb_space: 20px;
                --swiper_thumb_ratio: 1 / 1;
                --swiper_video_icon_size: 30px;
                --swiper_slidesPerView: 5;
                --swiper_thumbsWidth: 100%;
                --swiper_thumbsSlideHeight: 80px;
                --swiper_swiperSlideSpaceBetween:10px;
                --swiper_waterfall_num: 2;
                --swiper_waterfall_space: 20px;
                --swiper_icon_space: 10px;
                --swiper-icon-size: 20px;
            }
    
            @media (max-width: 768px) {
                div #photoUrlList_03fed688a6144186a5ea340da352cd47 .lead_swiper_container{
                --swiper_wrapperHeight: auto;
                --swiper_thumbsSlideHeight: auto;
              }
            }
        

        .prodName{
            font-size:22px;
        }
    

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f1f5f9;
      color: #0f172a;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 24px 16px;
    }
    
    .unit-widget-wrapper {
      width: 100%;
      max-width: 680px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
      user-select: none;
    }

    .comp-radio { display: none !important; }

    .unit-header {
      padding: 16px 20px;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .unit-title-group h3 {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 3px;
    }
    .unit-title-group p {
      font-size: 12px;
      color: #64748b;
    }
    .unit-hint-badge {
      font-size: 11px;
      padding: 5px 12px;
      border-radius: 20px;
      background: #e0f2fe;
      color: #0284c7;
      font-weight: 600;
      border: 1px solid #bae6fd;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .unit-stage {
      position: relative;
      width: 100%;
      background: radial-gradient(circle at center, #ffffff 0%, #f8fafc 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 24px 0 16px 0;
      border-bottom: 1px solid #e2e8f0;
    }
    .unit-img-box {
      position: relative;
      width: 360px;
      max-width: 92%;
      aspect-ratio: 1 / 1;
    }
    .unit-img-box img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      pointer-events: none;
    }

    .hotspot-pin {
      position: absolute;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #0284c7;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transform: translate(-50%, -50%);
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.45);
      border: 2px solid #ffffff;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 10;
    }
    .hotspot-pin:hover {
      transform: translate(-50%, -50%) scale(1.18);
      background: #0369a1;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.6);
      z-index: 20;
    }

    /* 坐标映射 */
    .pin-1  { left: 45%; top: 66%; }
    .pin-2  { left: 27%; top: 38%; }
    .pin-3  { left: 64%; top: 66%; }
    .pin-4  { left: 40%; top: 76%; }
    .pin-5  { left: 58%; top: 76%; }
    .pin-6  { left: 60%; top: 56%; }
    .pin-7  { left: 74%; top: 56%; }
    .pin-8  { left: 52%; top: 35%; }
    .pin-9  { left: 50%; top: 48%; }
    .pin-10 { left: 48%; top: 18%; }

    .unit-inspector {
      display: flex;
      min-height: 290px;
      background: #ffffff;
    }

    .component-list-pane {
      width: 45%;
      border-right: 1px solid #e2e8f0;
      overflow-y: auto;
      max-height: 300px;
      padding: 10px 8px;
    }
    .component-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 8px;
      margin-bottom: 4px;
      cursor: pointer;
      background: #f8fafc;
      border: 1px solid transparent;
      transition: all 0.15s ease;
    }
    .component-item:hover {
      background: #f1f5f9;
    }
    .item-badge {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #cbd5e1;
      color: #475569;
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }
    .item-label {
      font-size: 12px;
      font-weight: 500;
      color: #334155;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .component-detail-pane {
      flex: 1;
      padding: 20px;
      position: relative;
    }
    .detail-card {
      display: none;
      height: 100%;
    }
    .detail-header-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #0284c7;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .detail-title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 14px 0;
      padding-bottom: 10px;
      border-bottom: 1px dashed #cbd5e1;
    }
    .detail-field { margin-bottom: 12px; }
    .detail-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      margin-bottom: 3px;
    }
    .detail-value {
      font-size: 12.5px;
      color: #334155;
      line-height: 1.55;
    }
    .detail-tag-pill {
      display: inline-block;
      padding: 3px 10px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      font-size: 11.5px;
      color: #475569;
      margin-top: 4px;
    }

    /* 纯 CSS 状态机切换规则 */
    #c1:checked ~ .unit-stage .pin-1,
    #c2:checked ~ .unit-stage .pin-2,
    #c3:checked ~ .unit-stage .pin-3,
    #c4:checked ~ .unit-stage .pin-4,
    #c5:checked ~ .unit-stage .pin-5,
    #c6:checked ~ .unit-stage .pin-6,
    #c7:checked ~ .unit-stage .pin-7,
    #c8:checked ~ .unit-stage .pin-8,
    #c9:checked ~ .unit-stage .pin-9,
    #c10:checked ~ .unit-stage .pin-10 {
      background: #0284c7;
      transform: translate(-50%, -50%) scale(1.28);
      box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.25), 0 4px 12px rgba(2, 132, 199, 0.6);
      z-index: 30;
    }

    #c1:checked ~ .unit-inspector .item-1,
    #c2:checked ~ .unit-inspector .item-2,
    #c3:checked ~ .unit-inspector .item-3,
    #c4:checked ~ .unit-inspector .item-4,
    #c5:checked ~ .unit-inspector .item-5,
    #c6:checked ~ .unit-inspector .item-6,
    #c7:checked ~ .unit-inspector .item-7,
    #c8:checked ~ .unit-inspector .item-8,
    #c9:checked ~ .unit-inspector .item-9,
    #c10:checked ~ .unit-inspector .item-10 {
      background: #e0f2fe;
      border-color: #bae6fd;
    }

    #c1:checked ~ .unit-inspector .item-1 .item-badge,
    #c2:checked ~ .unit-inspector .item-2 .item-badge,
    #c3:checked ~ .unit-inspector .item-3 .item-badge,
    #c4:checked ~ .unit-inspector .item-4 .item-badge,
    #c5:checked ~ .unit-inspector .item-5 .item-badge,
    #c6:checked ~ .unit-inspector .item-6 .item-badge,
    #c7:checked ~ .unit-inspector .item-7 .item-badge,
    #c8:checked ~ .unit-inspector .item-8 .item-badge,
    #c9:checked ~ .unit-inspector .item-9 .item-badge,
    #c10:checked ~ .unit-inspector .item-10 .item-badge {
      background: #0284c7;
      color: #ffffff;
    }

    #c1:checked ~ .unit-inspector .item-1 .item-label,
    #c2:checked ~ .unit-inspector .item-2 .item-label,
    #c3:checked ~ .unit-inspector .item-3 .item-label,
    #c4:checked ~ .unit-inspector .item-4 .item-label,
    #c5:checked ~ .unit-inspector .item-5 .item-label,
    #c6:checked ~ .unit-inspector .item-6 .item-label,
    #c7:checked ~ .unit-inspector .item-7 .item-label,
    #c8:checked ~ .unit-inspector .item-8 .item-label,
    #c9:checked ~ .unit-inspector .item-9 .item-label,
    #c10:checked ~ .unit-inspector .item-10 .item-label {
      color: #0369a1;
      font-weight: 600;
    }

    #c1:checked ~ .unit-inspector .card-1,
    #c2:checked ~ .unit-inspector .card-2,
    #c3:checked ~ .unit-inspector .card-3,
    #c4:checked ~ .unit-inspector .card-4,
    #c5:checked ~ .unit-inspector .card-5,
    #c6:checked ~ .unit-inspector .card-6,
    #c7:checked ~ .unit-inspector .card-7,
    #c8:checked ~ .unit-inspector .card-8,
    #c9:checked ~ .unit-inspector .card-9,
    #c10:checked ~ .unit-inspector .card-10 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      animation: fadeIn 0.15s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .component-list-pane::-webkit-scrollbar { width: 5px; }
    .component-list-pane::-webkit-scrollbar-track { background: transparent; }
    .component-list-pane::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
  

        .emptyNodeData {
            display:none;
        }
   

    #productDetail_28412_03fed688a6144186a5ea340da352cd47_leftColumn{
        width:40%;
        max-width:100%;
        flex: 1 1 40%;
    }
    #productDetail_28412_03fed688a6144186a5ea340da352cd47_rightColumn{
        width:60%;
        max-width:100%;
        flex: 1 1 60%;
    }

    #productDetail_28412_03fed688a6144186a5ea340da352cd47_rowContainer_ip5413{
        padding: 0px;
    }

    #productDetail_28412_03fed688a6144186a5ea340da352cd47_column_iojrko{
        padding: 5px 15px 5px 0px;
    }