/* =========================================================
   product.css — detail page (Dark Gold Redesign)
   ========================================================= */

.pd{ padding: 150px 0 60px; }
.pd-back{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--walnut-soft);
  display: inline-block;
  margin-bottom: 40px;
  transition: color .25s ease;
}
.pd-back:hover{ color: var(--honey); }

.pd-top{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 70px;
}
.pd-stage{
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: #ffffff;
  box-shadow: 0 20px 50px -25px rgba(60,40,20,0.12);
  border: 4px solid rgba(217, 142, 4, 0.3);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s;
}
.pd-stage img{ width:100%; height:100%; object-fit: contain; object-position: center; padding: 16px; }
.pd-stage:hover{ transform: rotate(-1deg) scale(1.015); border-color: var(--honey); }

.pd-copy .eyebrow{ color: var(--honey-deep); }

.pd-copy h1{
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  color: #1f150d;
  margin: 16px 0 12px;
}
.pd-tagline{
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--walnut-soft);
  max-width: 46ch;
  margin: 0 0 24px;
}

.pack-chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.pack-chip{
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--honey-deep);
  border: 1px solid rgba(217, 142, 4, 0.3);
}

.pd-desc{
  color: var(--walnut-soft);
  max-width: 56ch;
  line-height: 1.7;
}

/* spec grid */
.pd-specs{ padding: 60px 0; }
.spec-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-top: 30px;
}
.spec-item{
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 24px;
  border: 1px solid rgba(217, 142, 4, 0.22);
  box-shadow: 0 10px 30px -18px rgba(60,40,20,0.08);
}
.spec-item .spec-key{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--honey-deep);
  font-weight: 700;
  margin-bottom: 8px;
}
.spec-item .spec-val{
  font-size: 15px;
  color: #1f150d;
}

/* also-in-the-line grid */
.pd-next{ padding: 60px 0 40px; }
.pd-next-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.pd-next-card{
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(217, 142, 4, 0.22);
  box-shadow: 0 8px 24px -14px rgba(60,40,20,0.08);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s;
  text-decoration: none;
  color: inherit;
}
.pd-next-card:hover{
  transform: translateY(-4px);
  border-color: var(--honey);
  box-shadow: 0 18px 40px -16px rgba(60,40,20,0.15);
}
.pd-next-card .mini-thumb{
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: #140f0a;
}
.pd-next-card .mini-thumb img{ width:100%; height:100%; object-fit:cover; }
.pd-next-card .mini-info .mini-code{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--honey-deep);
  font-weight: 700;
}
.pd-next-card .mini-info .mini-name{
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: #1f150d;
  margin-top: 4px;
}

@media (max-width: 860px){
  .pd{ padding: 120px 0 40px; }
  .pd-top{ grid-template-columns: 1fr; gap: 36px; }
  .pd-stage{ max-width: 400px; }
}

@media (max-width: 480px){
  .pd{ padding: 100px 0 30px; }
  .pd-back{ margin-bottom: 24px; }
  .spec-grid{ grid-template-columns: 1fr; gap: 16px; }
  .pd-next-grid{ grid-template-columns: 1fr; }
}