/**
 * 产品详情页样式
 * 从 kaliebo 静态样式迁入主题 assets，供 single-products.php 使用。
 */

/* ================================================================
   PRODUCT DETAIL PAGE
   ================================================================ */
.pd-top{display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:start;}

/* 图库：左侧竖排缩略图（一次 5 张，上下箭头翻动） + 右侧正方形主图 */
.pd-gallery{
  display:grid;
  grid-template-columns:96px minmax(0, 1fr);
  gap:16px; align-items:start;
  max-width:632px;           /* 96 + 16 + 520 → 主图与缩略图区等高（520px） */
}
/* 箭头不占布局空间（绝对定位浮在上下方），保证缩略图与大图顶边对齐 */
.pd-thumbnav{
  order:-1;
  position:relative;
  display:flex; flex-direction:column;
  align-items:stretch;        /* 让缩略图列撑满 96px 列宽（否则会被内容宽度塌陷） */
}
.pd-main{
  position:relative;
  aspect-ratio:1/1;          /* 主图改为正方形 */
  background:#C9D4DD;
  border:1px solid var(--line-dark);
  overflow:hidden;
}
.pd-main-viewport{
  position:absolute; inset:0;
  overflow:hidden;
}
.pd-main-track{
  display:flex;
  height:100%;
  width:100%;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.pd-main-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
}
.pd-main-slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.pd-main-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(14,28,41,.42);
  color:var(--paper);
  font-size:22px; line-height:1; cursor:pointer;
  opacity:0;
  transition:opacity .2s ease, background .2s ease, border-color .2s ease;
}
.pd-main:hover .pd-main-nav,
.pd-main:focus-within .pd-main-nav{opacity:1;}
.pd-main-nav:hover{background:var(--rust); border-color:var(--rust);}
.pd-main-nav.prev{left:12px;}
.pd-main-nav.next{right:12px;}
.pd-main-video{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%;
  object-fit:contain; background:#000;
  display:none;
}
.pd-main.is-playing .pd-main-video{display:block;}
.pd-main.is-playing .pd-main-viewport,
.pd-main.is-playing .pd-main-nav{visibility:hidden; pointer-events:none;}
.pd-main-video::-webkit-media-controls-download-button{display:none;}
.pd-main-video::-internal-media-controls-download-button{display:none;}
@media (max-width:760px){
  .pd-main-nav{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .pd-main-track{transition:none;}
}
/* 缩略图区：固定显示 5 张（5 × 96 + 4 × 10 = 520），高度多 2px 避免末张下边框被裁 */
.pd-thumbs{
  display:flex; flex-direction:column;
  width:100%;
  gap:9px; margin-top:0;
  height:522px;
  overflow:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.pd-thumbs::-webkit-scrollbar{display:none; width:0; height:0;}

/* 上下翻页箭头：绝对定位在缩略图区上下方，不参与布局 */
.pd-tnav{
  position:absolute; left:50%; margin-left:-14px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  border:1px solid var(--line-dark);
  color:var(--steel);
  font-size:12px; line-height:1; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.pd-tnav:hover:not(:disabled){background:var(--rust); border-color:var(--rust); color:var(--paper);}
.pd-tnav:disabled{opacity:.3; cursor:default;}
.pd-tnav.up{top:-40px;}
.pd-tnav.down{bottom:-40px;}
.pd-thumb{
  position:relative;
  width:100%; flex:0 0 auto;
  aspect-ratio:1/1; padding:0;
  background:#C9D4DD;
  border:1px solid var(--line-dark);
  overflow:hidden; cursor:pointer;
  transition:border-color .2s ease;
}
.pd-thumb-wrap{
  position:relative;
  width:100%; flex:0 0 auto;
}
.pd-thumb-wrap .pd-thumb{width:100%;}
.pd-thumb-play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:36px; height:36px; border-radius:50%;
  border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,0.95);
  box-shadow:0 6px 16px rgba(14,28,41,0.28);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease;
}
.pd-thumb-play:hover{transform:translate(-50%,-50%) scale(1.08);}
.pd-thumb-play i{
  display:block;
  width:0; height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:10px solid var(--rust);
  margin-left:3px;
}
.pd-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.pd-thumb:hover{border-color:var(--rust);}
.pd-thumb.active{border-color:var(--rust); box-shadow:inset 0 0 0 1px var(--rust);}

.pd-tagchip{
  display:inline-block;
  background:var(--rust); color:var(--paper);
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 13px; margin-bottom:16px;
}
.pd-title{font-size:clamp(30px,3.4vw,46px); margin-bottom:14px;}
.pd-lead{font-size:15.5px; color:#26374A; max-width:56ch; margin-bottom:20px;}
.pd-lead > *:first-child{margin-top:0;}
.pd-lead > *:last-child{margin-bottom:0;}
.pd-lead p{font-size:inherit; color:inherit; max-width:none; margin:0 0 0.85em;}
.pd-facts{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px;}
.pd-fact{
  border:1px solid var(--line-dark); background:var(--paper);
  font-size:12.5px; font-weight:600; color:var(--ink);
  padding:8px 14px;
}
.pd-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.btn-solid,.btn-outline{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600;
  padding:15px 30px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-solid{background:var(--rust); color:var(--paper); border:1px solid var(--rust);}
.btn-solid:hover{background:var(--rust-dark); border-color:var(--rust-dark);}
.btn-outline{border:1px solid var(--line-dark); color:var(--ink); background:transparent;}
.btn-outline:hover{border-color:var(--rust); color:var(--rust);}
@media (max-width:980px){ .pd-top{grid-template-columns:1fr; gap:36px;} }
/* 窄屏：缩略图回到主图下方横排，隐藏上下箭头（改为横向滑动） */
@media (max-width:760px){
  .pd-gallery{grid-template-columns:1fr; gap:12px; max-width:none;}
  .pd-thumbnav{order:0;}
  .pd-tnav{display:none;}
  .pd-thumbs{
    flex-direction:row; gap:10px;
    height:auto; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
  }
  .pd-thumb,
  .pd-thumb-wrap{width:auto; flex:0 0 84px;}
  .pd-thumb-wrap .pd-thumb{flex:none; width:100%;}
  .pd-actions{flex-direction:column; align-items:stretch;}
  .pd-actions .btn-solid,
  .pd-actions .btn-outline{width:100%; justify-content:center;}
  .pd-tab{padding:12px 16px; font-size:13.5px;}
}

/* tabs */
.pd-tabs{display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line-dark); margin-bottom:32px;}
.pd-tab{
  background:transparent; border:none; cursor:pointer; position:relative;
  font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600;
  color:var(--steel); padding:14px 26px;
  transition:color .2s ease;
}
.pd-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--rust);
  transform:scaleX(0); transition:transform .25s ease;
}
.pd-tab:hover{color:var(--ink);}
.pd-tab.active{color:var(--ink);}
.pd-tab.active::after{transform:scaleX(1);}
.pd-panel{display:none;}
.pd-panel.active{display:block;}
.pd-panel p{font-size:15.5px; color:#26374A; max-width:84ch; margin-bottom:16px;}
.pd-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px; font-weight:600; margin-bottom:14px;
}

/* specification table */
.spec-table{width:100%; border-collapse:collapse; max-width:940px;}
.spec-table tr{border-bottom:1px solid var(--line-dark);}
.spec-table th{
  text-align:left; vertical-align:top;
  width:34%; padding:15px 24px 15px 0;
  font-family:'Inter',sans-serif;
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--steel);
}
.spec-table td{padding:15px 0; font-size:15px; color:var(--ink);}
@media (max-width:620px){
  .pd-tab{padding:12px 14px; font-size:13.5px;}
  .spec-table th{width:44%; padding-right:14px;}
}

/* related products strip */
.rel-item{
  width:calc((100% - 48px) / 4);
  min-width:240px;
  background:var(--paper);
  border:1px solid var(--line-dark);
  overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.rel-item:hover{border-color:var(--rust); transform:translateY(-4px);}
.rel-media{position:relative; aspect-ratio:4/3; background:#C9D4DD; border-bottom:1px solid var(--line-dark); overflow:hidden;}
.rel-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.rel-name{
  display:block; padding:14px 16px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px; font-weight:600;
}
@media (max-width:980px){ .rel-item{width:calc((100% - 32px) / 3);} }
@media (max-width:620px){ .rel-item{width:calc((100% - 16px) / 2);} }

/* ================================================================
   RELATED PRODUCTS (详情页) — 沿用首页分类卡样式，改为横向滚动条带
   ================================================================ */
#related .hscroll-wrap{
  padding-bottom:10px;
}
/* 横滑容器 overflow-y:hidden 会裁切上浮卡片，详情页禁用 translateY */
#related .rel-cat.cat-card{
  transform:none;
  position:relative;
  z-index:0;
  transition:border-color .25s ease, box-shadow .25s ease;
}
#related .rel-cat.cat-card:hover{
  transform:none;
  z-index:2;
  border-color:var(--rust);
  box-shadow:0 14px 30px -16px rgba(14,28,41,0.28);
}
.rel-cat{width:calc((100% - 64px) / 5);}          /* 一屏 5 张 */
.rel-cat .cat-meta{padding:14px 16px;}
@media (max-width:1200px){ .rel-cat{width:calc((100% - 48px) / 4);} }
@media (max-width:980px){ .rel-cat{width:calc((100% - 32px) / 3);} }
@media (max-width:620px){ .rel-cat{width:calc((100% - 16px) / 2);} }