/* =====================================================
   PASHANI — 商品详情页专属样式 (product.html)
   国际大牌详情页范式：左图右文 + 材质工艺 + 相关推荐
   与全站共用 assets/pages.css 的设计系统
   ===================================================== */

/* ---------- Breadcrumb ---------- */
.p-breadcrumb {
  padding: calc(104px + var(--space-8)) 0 var(--space-8);
}
.p-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-taupe);
}
.p-crumb a { transition: color var(--duration-fast); }
.p-crumb a:hover { color: var(--color-camel); }
.p-crumb .sep { opacity: 0.5; }
.p-crumb .current { color: var(--color-charcoal); }

/* ---------- Main: gallery + info ---------- */
.p-main { padding-bottom: var(--space-24); }
.p-main-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (min-width: 1024px) {
  .p-main-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); }
}

/* Gallery */
.p-gallery {
  position: relative;
  overflow: hidden;
  background: var(--color-cream-dark);
}
.p-gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}
.p-gallery:hover img { transform: scale(1.03); }
.p-gallery-note {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  padding: var(--space-1) var(--space-3);
  background: rgba(247, 244, 239, 0.85);
  backdrop-filter: blur(4px);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-warm-gray);
}

/* Info column */
.p-info { position: relative; }
@media (min-width: 1024px) {
  .p-info { position: sticky; top: 104px; }
}
.p-series {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-camel);
  margin-bottom: var(--space-4);
  transition: color var(--duration-fast);
}
.p-series:hover { color: var(--color-charcoal); }
.p-series-arrow {
  width: 13px; height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}
.p-series:hover .p-series-arrow { opacity: 1; transform: translateX(0); }
.p-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}
.p-en {
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-taupe);
  margin-bottom: var(--space-8);
}
.p-rule {
  height: 1px;
  background: rgba(44, 36, 25, 0.1);
  margin-bottom: var(--space-8);
}
.p-desc {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--color-warm-gray);
  margin-bottom: var(--space-10);
}

/* Numbered craft points */
.p-points { margin-bottom: var(--space-10); }
.p-point {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(44, 36, 25, 0.08);
}
.p-point:last-child { border-bottom: 1px solid rgba(44, 36, 25, 0.08); }
.p-point-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-camel);
}
.p-point-title {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-charcoal);
  margin-bottom: var(--space-1);
}
.p-point-desc {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-warm-gray);
}

/* Spec table */
.p-spec { margin-bottom: var(--space-10); }
.p-spec-title {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-taupe);
  margin-bottom: var(--space-4);
}
.p-spec dl { display: grid; grid-template-columns: 1fr; gap: 0; }
.p-spec .p-spec-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(44, 36, 25, 0.06);
}
.p-spec dt {
  font-size: 0.8rem;
  color: var(--color-warm-gray);
}
.p-spec dd {
  font-size: 0.85rem;
  color: var(--color-charcoal);
  font-weight: 400;
}

/* Services row */
.p-services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(44, 36, 25, 0.08);
  border-bottom: 1px solid rgba(44, 36, 25, 0.08);
  margin-bottom: var(--space-10);
}
.p-service {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.78rem;
  color: var(--color-warm-gray);
  letter-spacing: 0.02em;
}
.p-service svg { width: 16px; height: 16px; stroke: var(--color-camel); fill: none; stroke-width: 1.6; flex-shrink: 0; }

/* CTA buttons */
.p-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 1rem 2.2rem;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all var(--duration-normal) var(--ease-out-quart);
  cursor: pointer;
  border: none;
}
.p-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform var(--duration-fast); }
.p-btn-solid {
  background: var(--color-charcoal);
  color: var(--color-cream);
  border: 1px solid var(--color-charcoal);
}
.p-btn-solid:hover { background: var(--color-espresso); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(44, 36, 25, 0.18); }
.p-btn-solid:hover svg { transform: translateX(3px); }
.p-btn-ghost {
  background: transparent;
  color: var(--color-charcoal);
  border: 1px solid rgba(44, 36, 25, 0.25);
}
.p-btn-ghost:hover { border-color: var(--color-charcoal); transform: translateY(-2px); }
.p-note {
  font-size: 0.72rem;
  color: var(--color-taupe);
  letter-spacing: 0.03em;
}

/* ---------- Material & craft section ---------- */
.p-detail {
  padding: var(--space-24) 0;
  background: var(--color-linen);
}
.p-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 1024px) {
  .p-detail-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}
.p-detail-media { overflow: hidden; }
.p-detail-media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}
.p-detail-media:hover img { transform: scale(1.03); }
.p-detail-copy .label { margin-bottom: var(--space-4); }
.p-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.15;
  color: var(--color-charcoal);
  margin-bottom: var(--space-6);
}
.p-detail-copy p {
  font-size: 0.95rem;
  line-height: 1.95;
  color: var(--color-warm-gray);
  margin-bottom: var(--space-8);
}
.p-mini {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.p-mini li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(44, 36, 25, 0.14);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-brown);
}

/* ---------- Atelier story ---------- */
.p-story { padding: var(--space-24) 0; }
.p-quote { text-align: center; }
.p-quote img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  margin-bottom: var(--space-12);
}
.p-quote blockquote {
  max-width: 760px;
  margin: 0 auto var(--space-6);
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.5;
  color: var(--color-charcoal);
}
.p-quote figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-taupe);
}

/* ---------- Related products ---------- */
.p-related {
  padding: var(--space-24) 0;
  background: var(--color-cream);
  border-top: 1px solid rgba(44, 36, 25, 0.06);
}
.p-related-head { text-align: center; margin-bottom: var(--space-12); }
.p-related-head .label { margin-bottom: var(--space-3); }
.p-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .p-related-grid { grid-template-columns: repeat(2, 1fr); }
}
.p-rel-card {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--color-cream-dark);
}
.p-rel-media { overflow: hidden; }
.p-rel-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo), filter var(--duration-slow) var(--ease-out-expo);
  filter: saturate(0.92);
}
.p-rel-card:hover .p-rel-media img { transform: scale(1.04); filter: saturate(1); }
.p-rel-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-2) 0;
}
.p-rel-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-charcoal);
}
.p-rel-en {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-taupe);
}
.p-rel-arrow {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-6);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--duration-normal) var(--ease-out-quart);
}
.p-rel-arrow svg { width: 15px; height: 15px; stroke: var(--color-charcoal); fill: none; stroke-width: 2; }
.p-rel-card:hover .p-rel-arrow { opacity: 1; transform: translateY(0); }

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  .p-main { padding-bottom: var(--space-16); }
  .p-detail, .p-story, .p-related { padding: var(--space-16) 0; }
  .p-btn { width: 100%; }
}

/* ---------- Buy Modal: Mini-Program QR ---------- */
.buy-modal {
  max-width: 420px;
  text-align: center;
}
.buy-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-2);
}
.qr-frame {
  width: 100%;
  max-width: 280px;
  padding: var(--space-4);
  background: #FFFFFF;
  border: 1px solid rgba(44, 36, 25, 0.08);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(44, 36, 25, 0.08);
}
.qr-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.qr-tip {
  font-size: 0.875rem;
  color: var(--color-warm-gray);
  letter-spacing: 0.04em;
}
.qr-note {
  font-size: 0.72rem;
  color: var(--color-taupe);
  max-width: 320px;
  line-height: 1.6;
}
.qr-note code {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  background: var(--color-linen);
  padding: 1px 4px;
  border-radius: 2px;
}