/* Product Detail — page styles from product-detail.html */
.breadcrumb{
      padding:18px 0;
      border-bottom:1px solid var(--color-gray-line);
    }
    .breadcrumb ul{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .breadcrumb li{ font-size:13px; color:var(--color-gray-mid); display:flex; align-items:center; gap:8px; }
    .breadcrumb a:hover{ color:var(--color-accent); }
    .breadcrumb li.current{ color:var(--color-text); font-weight:500; }

    /* ================================================================
       产品主区 — 双栏
       ================================================================ */
    .product-main{ padding:56px 0 80px; }
    .product-layout{
      display:grid;
      grid-template-columns: 1.15fr 1fr;
      gap:64px;
      align-items:flex-start;
    }

    /* 左：图片/视频区 */
    .gallery{ 
      position:sticky; 
      top:96px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
    
    /* 缩略图：改为左侧垂直排列并带箭头 */
    .gallery-thumbs-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 84px;
      flex-shrink: 0;
      position: relative;
    }
    
    .thumb-arrow {
      width: 100%;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: 1px solid var(--color-gray-line);
      cursor: pointer;
      z-index: 10;
      transition: all 0.2s;
    }
    .thumb-arrow:hover {
      background: var(--color-gray-light);
      color: var(--color-accent);
    }
    .thumb-arrow svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }
    .thumb-arrow.disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .gallery-thumbs-wrap{
      width: 100%;
      /* 高度会在页面载入或缩放时通过 JS 动态赋予与主图一致的值，此处设为100%容器撑开 */
      overflow: hidden; 
      position: relative;
      margin: 8px 0;
    }
    .gallery-thumbs{
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .thumb{
      width: 100%;
      aspect-ratio:1/1;
      overflow:hidden;
      cursor:pointer;
      background:#fff;
      border:1.5px solid var(--color-gray-line);
      border-radius:2px;
      transition:border-color .2s ease;
      position:relative;
      flex-shrink: 0;
    }
    .thumb.active{ border-color:var(--color-accent); }
    .thumb:hover{ border-color:var(--color-gray-mid); }
    .thumb .img-box{ height:100%; background:#fff; }
    .thumb .img-box img{ object-fit:cover; }
    .thumb.thumb-video::after{
      content:'';
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:26px; height:26px; border-radius:50%;
      background:rgba(255,255,255,.92);
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='6,4 20,12 6,20' fill='%23da1984'/></svg>");
      background-size:12px; background-repeat:no-repeat; background-position:center 52%;
      box-shadow:0 2px 6px rgba(0,0,0,.15);
    }

    /* 主图容器调整占满剩余宽度 */
    .gallery-main-wrap {
      flex-grow: 1;
    }
    .gallery-main{
      aspect-ratio:1/1;
      overflow:hidden;
      background:var(--color-gray-light);
      position:relative;
      width: 100%;
    }
    .gallery-main .img-box{ height:100%; }
    .gallery-main .img-box img{ transition: opacity .3s ease; }
    .gallery-main video{
      position:absolute; inset:0; width:100%; height:100%;
      object-fit:cover; background:#000; display:none;
    }
    .gallery-main.is-video video{ display:block; }
    .gallery-main.is-video .img-box{ display:none; }

    .gallery-badge{
      position:absolute; top:14px; left:14px; z-index:5;
      background:var(--color-accent); color:#fff;
      font-size:10px; font-weight:600; letter-spacing:.06em; padding:6px 12px;
    }
    .gallery-zoom-hint{
      position:absolute; bottom:14px; right:14px; z-index:5;
      background:rgba(255,255,255,.92); width:38px; height:38px;
      border-radius:50%; display:flex; align-items:center; justify-content:center;
      cursor:pointer; border:none; padding:0;
      transition: background .2s ease, transform .2s ease;
    }
    .gallery-zoom-hint:hover{
      background:#fff;
      transform: scale(1.06);
    }
    .gallery-zoom-hint svg{ width:16px; height:16px; stroke:#000; stroke-width:1.8; }

    /* 放大查看灯箱 */
    .gallery-lightbox{
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .gallery-lightbox[hidden]{
      display: none !important;
    }
    .gallery-lightbox-overlay{
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.88);
    }
    .gallery-lightbox-content{
      position: relative;
      z-index: 1;
      width: min(92vw, 1100px);
      height: min(88vh, 900px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .gallery-lightbox-stage{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .gallery-lightbox-stage img{
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
      user-select: none;
      transition: opacity .2s ease;
    }
    .gallery-lightbox-close{
      position: fixed;
      top: 88px;
      right: 24px;
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 50%;
      background: rgba(255,255,255,.12);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s ease;
      z-index: 3;
    }
    .gallery-lightbox-close:hover{ background: rgba(255,255,255,.22); }
    .gallery-lightbox-close svg{ width: 20px; height: 20px; }
    .gallery-lightbox-nav{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 46px;
      height: 46px;
      border: none;
      border-radius: 50%;
      background: rgba(255,255,255,.12);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s ease;
      z-index: 2;
    }
    .gallery-lightbox-nav:hover{ background: rgba(255,255,255,.22); }
    .gallery-lightbox-nav.prev{ left: -58px; }
    .gallery-lightbox-nav.next{ right: -58px; }
    .gallery-lightbox-nav svg{ width: 22px; height: 22px; }
    .gallery-lightbox-nav[disabled]{
      opacity: .35;
      cursor: default;
      pointer-events: none;
    }
    .gallery-lightbox-counter{
      position: absolute;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255,255,255,.85);
      font-size: 13px;
      letter-spacing: .04em;
      white-space: nowrap;
    }

    body.gallery-lightbox-open{
      overflow: hidden;
    }

    .gallery-play-btn{
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:64px; height:64px; border-radius:50%;
      background:rgba(255,255,255,.92); display:flex; align-items:center;
      justify-content:center; z-index:6; transition:all .25s ease;
    }
    .gallery-main:not(.has-video) .gallery-play-btn{
      display:none !important;
    }
    .gallery-play-btn svg{ width:22px; height:22px; fill:var(--color-accent); margin-left:3px; }
    .gallery-play-btn:hover{ background:#fff; transform:translate(-50%,-50%) scale(1.06); }
    .gallery-main.is-video.is-playing .gallery-play-btn{ opacity:0; pointer-events:none; }

    /* 右：信息区 — 新增特性列表和规格简表 */
    .product-info .category-tag{
      color:var(--color-accent); font-size:12.5px; font-weight:600;
      letter-spacing:.1em; text-transform:uppercase;
    }
    .product-info h1{
      font-family: var(--font-body);
      font-weight:700;
      font-size:28px;
      letter-spacing:-.01em;
      margin-top:10px; margin-bottom:20px; line-height:1.35;
    }
    .product-info .product-description{
      font-size:15px; line-height:1.85; color:#555;
      max-width:100%;
      margin-bottom:20px;
    }
    .product-info .product-description table{margin-bottom:14px;}
    .product-info .product-description > *:first-child{ margin-top: 0; }
    .product-info .product-description > *:last-child{ margin-bottom: 0; }
    .product-info .product-description p{ margin: 0 0 14px; }
    .product-info .product-description ul,
    .product-info .product-description ol{ margin: 0 0 14px; padding-left: 1.2em; }
    .product-info .product-description li{ margin-bottom: 6px; }

    /* 产品特性列表 */
    .feature-list {
      list-style: none;
      padding: 0;
      margin: 0 0 22px 0;
      max-width: 520px;
    }
    .feature-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 6px 0;
      font-size: 14px;
      color: #444;
      border-bottom: 1px solid var(--color-gray-line);
    }
    .feature-list li:last-child { border-bottom: none; }
    .feature-list li .check {
      color: var(--color-accent);
      font-weight: 700;
      font-size: 16px;
      line-height: 1.5;
      flex-shrink: 0;
    }

    /* 规格简表 */
    .specs-mini {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 24px;
      max-width: 520px;
      padding: 14px 0;
      border-top: 1px solid var(--color-gray-line);
      border-bottom: 1px solid var(--color-gray-line);
      margin-bottom: 24px;
    }
    .specs-mini .spec-item {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      font-size: 13px;
    }
    .specs-mini .spec-item .label {
      color: var(--color-gray-mid);
      font-weight: 400;
    }
    .specs-mini .spec-item .value {
      font-weight: 500;
      color: var(--color-text);
    }

    .cta-row{ display:flex; gap:12px; margin-bottom:28px; }
    .cta-row .btn{ text-align:center; font-size:13.5px; padding:16px 48px; }

    /* ================================================================
       Tabs
       ================================================================ */
    .tabs-section{ border-top:1px solid var(--color-gray-line); }
    .tabs-nav{
      display:flex; gap:0; border-bottom:1px solid var(--color-gray-line);
      margin-bottom:40px;
    }
    .tab-btn{
      padding:18px 28px; font-size:14px; font-weight:600; letter-spacing:.03em;
      color:var(--color-gray-mid); position:relative; white-space:nowrap;
      transition:color .2s ease;
    }
    .tab-btn::after{
      content:''; position:absolute; left:0; bottom:-1px; width:100%; height:2px;
      background:var(--color-accent); transform:scaleX(0); transition:transform .25s ease;
    }
    .tab-btn.active{ color:var(--color-text); }
    .tab-btn.active::after{ transform:scaleX(1); }
    .tab-btn:hover{ color:var(--color-text); }

    .tab-panel{ display:none; }
    .tab-panel.active{ display:block; }

    .desc-panel{}
    .desc-panel p{ font-size:14.5px; color:#333; margin-bottom:16px; }
    .desc-panel h3{ font-size:18px; margin:24px 0 12px; }
    .desc-panel ul{ margin-bottom:16px; }
    .desc-panel ul li{
      font-size:14px; color:#333; padding:6px 0 6px 22px; position:relative;
    }
    .desc-panel .desc-text ul li::before{
      content:''; position:absolute; left:0; top:14px; width:7px; height:7px;
      border-radius:50%; background:var(--color-accent);
    }
    .desc-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .desc-gallery .img-box{ aspect-ratio:1/1.15; }
    .desc-gallery .img-box:first-child{ grid-column:1/-1; aspect-ratio:16/10; }

    .specs-table{ width:100%; border-collapse:collapse; max-width:760px; }
    .specs-table tr{ border-bottom:1px solid var(--color-gray-line); }
    .specs-table tr:nth-child(odd){ background:var(--color-gray-light); }
    .specs-table td{ padding:14px 20px; font-size:13.5px; }
    .specs-table td:first-child{ font-weight:600; width:220px; color:#333; }
    .specs-table td:last-child{ color:#555; }

    /* ================================================================
       相关推荐轮播（隔离首页轮播 .product-card 的 flex 宽度）
       ================================================================ */
    #related{
      position: relative;
      overflow: visible;
    }
    .related-carousel-wrapper{
      position: relative;
      padding: 0 30px;
    }
    .related-carousel-clip{
      overflow: hidden;
    }
    .related-grid{
      display: flex;
      gap: 28px;
      transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }
    .related-grid .product-card{
      display: block;
      flex: 0 0 auto;
      min-width: 0;
      position: relative;
      color: inherit;
      text-decoration: none;
    }
    .related-grid .product-image{
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: var(--color-gray-light);
    }
    .related-grid .product-image .img-box{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
    }
    .related-grid .product-image .img-box img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s ease;
    }
    .related-grid .badge{
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 5;
      background: var(--color-accent);
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .06em;
      padding: 5px 10px;
    }
    .related-grid .product-hover-btn{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--color-accent);
      color: #fff;
      text-align: center;
      padding: 12px;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 500;
      transform: translateY(100%);
      transition: transform .25s ease;
    }
    .related-grid .product-card:hover .product-hover-btn{
      transform: translateY(0);
    }
    .related-grid .product-card:hover .product-image .img-box img{
      transform: scale(1.06);
    }
    .related-grid .product-name{
      margin-top: 16px;
      font-size: 15px;
      font-weight: 500;
      text-align: center;
    }
    .related-carousel-wrapper .carousel-arrow{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255,255,255,0.95);
      box-shadow: 0 4px 20px rgba(0,0,0,0.10);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
      border: 1px solid #eee;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .related-carousel-wrapper .carousel-arrow:hover{
      background: #fff;
      box-shadow: 0 6px 24px rgba(0,0,0,0.12);
      border-color: var(--color-accent);
    }
    .related-carousel-wrapper .carousel-arrow svg{
      width: 20px;
      height: 20px;
      stroke: #222;
      stroke-width: 2.2;
      fill: none;
    }
    .related-carousel-wrapper .carousel-arrow:hover svg{
      stroke: var(--color-accent);
    }
    .related-carousel-wrapper .carousel-arrow.arrow-prev{
      left: -20px;
    }
    .related-carousel-wrapper .carousel-arrow.arrow-next{
      right: -20px;
    }

    
@media (max-width:1024px){
  .product-main{ padding: 40px 0 56px; }
  .product-layout{ grid-template-columns:1fr; gap:32px; }
  .gallery{
    position: static;
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .gallery-thumbs-container { width: 100%; }
  .gallery-thumbs { flex-direction: row; }
  .thumb-arrow { display: none; }
  .gallery-thumbs-wrap { margin: 0; width: 100%; }
  .gallery-main-wrap{
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .gallery-main{
    width: 100%;
  }
  .desc-panel{ grid-template-columns:1fr; gap:32px; }
  .related-carousel-wrapper{ padding: 0 20px; }
  .related-carousel-wrapper .carousel-arrow.arrow-prev{ left: -8px; }
  .related-carousel-wrapper .carousel-arrow.arrow-next{ right: -8px; }
  .gallery-lightbox-nav.prev{ left: 8px; }
  .gallery-lightbox-nav.next{ right: 8px; }
  .gallery-lightbox-close{ top: 96px; right: 16px; }
  .gallery-lightbox-counter{ bottom: 16px; }
}
@media (max-width:720px){
  .product-main{ padding: 24px 0 40px; }
  .product-layout{ gap: 24px; }
  .gallery-thumbs{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .specs-mini { grid-template-columns: 1fr; gap: 2px; }
  .cta-row{ flex-wrap:wrap; }
  .cta-row .btn{ width:100%; }
  .related-carousel-wrapper{ padding: 0 16px; }
  .related-carousel-wrapper .carousel-arrow{
    width: 40px;
    height: 40px;
  }
  .related-carousel-wrapper .carousel-arrow.arrow-prev{ left: -4px; }
  .related-carousel-wrapper .carousel-arrow.arrow-next{ right: -4px; }
  .desc-gallery{ grid-template-columns:1fr; }
  .product-info h1{ font-size:24px; }
  .tabs-nav{ margin-bottom:28px; }
  .tab-btn{ padding:14px 18px; font-size:13px; }
  .gallery-lightbox-content{
    width: 100vw;
    height: 100vh;
  }
  .gallery-lightbox-nav{
    width: 40px;
    height: 40px;
  }
}