/* ── HERO BG ── */
.page-hero {
  min-height: 340px; padding: 120px 24px 60px;
}
.page-hero-bg {
  background: url('../img/cart.png') center/cover no-repeat;
  background-color: #D4C0A8;
}
.page-hero .page-hero-title { color: #542908; }
.page-hero .page-hero-title span { color: #6a520c; }
.page-hero .page-hero-ornament { color: var(--gold-light); opacity: 0.5; }

/* ── DETAIL SECTION ── */
.detail-section {
  background: var(--ivory); padding: 60px 24px 80px;
}
.detail-image {
  background: var(--sand); border: 1px solid rgba(198,161,91,0.15);
  overflow: hidden; aspect-ratio: 0.8; max-width: 300px; margin: 0 auto;margin-top: 15px;
}
.detail-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.detail-info { padding-top: 12px; }
.detail-eyebrow {
  font-family: 'Cinzel', serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px;
}
.detail-title {
  font-family: 'Cinzel', serif; font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 600; letter-spacing: 0.08em; color: var(--text-dark);
  margin-bottom: 20px;
}
.detail-desc {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 550;
  color: #1a0f08; line-height: 1.8; margin-bottom: 24px;
}
.detail-divider {
  height: 1px; background: rgba(198,161,91,0.2); margin: 20px 0;
}
.detail-list { margin-bottom: 8px; }
.detail-list-item {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 550;
  color: #1a0f08; margin-bottom: 12px;
}
.detail-list-icon { color: var(--gold); font-size: 10px; }
.detail-size {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
}
.detail-size-label {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft);
}
.detail-size-value {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600;
  color: var(--text-dark);
}

/* ── INGREDIENTS ── */
.detail-ingredients {
  background: var(--sand-light); padding: 70px 24px;
}
.detail-ingredient-card {
  background: #fff; padding: 32px 24px; text-align: center;
  border: 1px solid rgba(198,161,91,0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  height: 100%;
}
.detail-ingredient-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(106,75,58,0.08);
}
.detail-ingredient-icon {
  font-size: 20px; color: var(--gold); margin-bottom: 12px;
  letter-spacing: 6px;
}
.detail-ingredient-card h4 {
  font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--text-dark); margin-bottom: 10px;
}
.detail-ingredient-card p {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 550;
  color: #1a0f08; line-height: 1.7; margin: 0;
}

/* ── CTA ── */
.detail-cta {
  background: var(--ivory); padding: 70px 24px 80px;
}
.detail-cta-title {
  font-family: 'Cinzel', serif; font-size: clamp(24px, 3vw, 34px);
  font-weight: 600; letter-spacing: 0.15em; color: var(--text-dark);
  margin-bottom: 12px;
}
.detail-cta-text {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 550;
  color: #1a0f08; margin-bottom: 28px;
}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .detail-section { padding: 40px 24px 60px; }
  .detail-image { margin-bottom: 24px; }
  .detail-ingredients { padding: 50px 24px; }
  .detail-cta { padding: 50px 24px 60px; }
}
@media(max-width:576px){
  .detail-section { padding: 30px 16px 50px; }
  .detail-ingredients { padding: 40px 16px; }
  .detail-cta { padding: 40px 16px 50px; }
}
