/* ============================================================
   Product detail page — Minshang
   ============================================================ */

.pd-hero {
  background: var(--ink);
  color: var(--white);
  padding: 28px 0 34px;
}
.pd-hero .crumb { margin-bottom: 18px; }
.pd-hero .crumb a { color: var(--muted-dark); }
.pd-hero .crumb a:hover { color: var(--brass-l); }

.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .pd-layout { grid-template-columns: 1fr; gap: 28px; }
}

/* --- gallery --- */
.pd-stage {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  height: clamp(460px, 58vw, 680px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pd-stage img {
  height: 88%;
  width: auto;
  object-fit: contain;
  transition: opacity 0.25s var(--ease);
}
.pd-stage img.is-fading { opacity: 0; }
.pd-stage-tag {
  position: absolute;
  left: 18px;
  top: 16px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.pd-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.pd-thumb {
  width: 64px;
  padding: 6px 6px 4px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color 0.2s var(--ease);
}
.pd-thumb img { height: 84px; width: auto; margin: 0 auto; }
.pd-thumb small { display: block; font-size: 10px; color: var(--muted); letter-spacing: 0.06em; margin-top: 4px; }
.pd-thumb:hover { border-color: var(--brass); }
.pd-thumb.is-active { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.pd-thumb.is-active small { color: var(--brass); }
.pd-thumb--scene {
  border-style: dashed;
  height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.pd-thumb--scene img { height: 84px; }
.pd-scene-ph { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }

.pd-stage-empty {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* --- info column --- */
.pd-info { position: sticky; top: 96px; }
@media (max-width: 900px) { .pd-info { position: static; } }

.pd-code {
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--brass);
  font-weight: 500;
}
.pd-info h1 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 6px 0 10px;
}
.pd-desc { color: var(--muted); max-width: 42ch; }

.pd-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 20px 0 6px;
}
.pd-swatch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  padding: 5px 12px 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pd-swatch:hover { border-color: var(--brass); color: var(--ink); }
.pd-swatch.is-active { border-color: var(--brass); color: var(--ink); background: var(--brass-soft); }
.pd-swatch i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(13, 16, 19, 0.2);
}
.pd-note { font-size: 12px; color: var(--muted); }

.pd-facts {
  margin-top: 22px;
  border-top: 1px solid var(--line);
}
.pd-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.pd-facts dt { color: var(--muted); }
.pd-facts dd { margin: 0; font-weight: 500; }

.pd-ctas { display: flex; gap: 12px; margin-top: 24px; }
.pd-ctas .btn { flex: 1; justify-content: center; text-align: center; }

/* --- sections --- */
.pd-section { padding: 56px 0 8px; }
.pd-section h2 { font-size: 1.4rem; margin-bottom: 20px; }

.pd-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
@media (max-width: 760px) { .pd-spec-grid { grid-template-columns: 1fr; } }
.pd-spec-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.pd-spec-grid dt { color: var(--muted); }
.pd-spec-grid dd { margin: 0; text-align: right; }

/* --- sku table --- */
.pd-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
table.pd-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.pd-table th, .pd-table td { padding: 11px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.pd-table th {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-2);
  font-weight: 500;
}
.pd-table tr:last-child td { border-bottom: 0; }
.pd-table td:first-child { font-weight: 500; letter-spacing: 0.04em; }

/* --- media band --- */
.pd-media-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 760px) { .pd-media-band { grid-template-columns: 1fr; } }
.pd-media-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
}
.pd-media-card--dashed { border-style: dashed; background: transparent; }

/* --- related --- */
.pd-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
@media (max-width: 760px) { .pd-related { grid-template-columns: 1fr; } }
.pd-rel-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: border-color 0.2s var(--ease);
}
.pd-rel-card:hover { border-color: var(--brass); }
.pd-rel-card .product-sku { display: block; margin-bottom: 4px; }
.pd-rel-card h3 { font-size: 1rem; margin-bottom: 6px; }
.pd-rel-card p { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.pd-rel-card .link-arrow { font-size: 13px; }

/* ==== v2: media thumbs & lightbox ==== */
.pd-media-band { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pd-media-thumb {
  border: 1px solid #e3e6e9; background: #fff; border-radius: 10px; padding: 8px;
  cursor: zoom-in; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .2s;
}
.pd-media-thumb:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.pd-media-thumb img { width: 100%; height: 110px; object-fit: contain; border-radius: 6px; }
.pd-media-thumb small { color: #5a636b; font-size: 11px; text-align: center; }
.pd-sec-note { color: #5a636b; font-size: 13px; margin: -6px 0 14px; }
.pd-model { font-weight: 400; color: #5a636b; font-size: .55em; letter-spacing: .04em; }
.pd-rel-thumb { width: 100%; height: 150px; object-fit: contain; background: #f6f7f8; border-radius: 8px; margin-bottom: 10px; }

.lightbox { position: fixed; inset: 0; background: rgba(10,12,14,.92); z-index: 9999;
  display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lb-img { max-width: 88vw; max-height: 86vh; border-radius: 6px; box-shadow: 0 12px 60px rgba(0,0,0,.5); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%; width: 44px; height: 44px; font-size: 22px; cursor: pointer; line-height: 1;
}
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.2); }
.pd-model { white-space: nowrap; }