/* =====================================================
   Voxmonks — Additional Page Styles (Brand Refresh)
   Covers: single product, generic pages, 404, search.
   ===================================================== */

.vm-singular { padding-top: 68px; min-height: 60vh; }

/* ── Single Product ── */
.vm-single-product { padding: 4rem 5rem; background: var(--vm-cream); }
.vm-single-product__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  max-width: 1100px; margin: 0 auto;
}
.vm-single-product__img {
  width: 100%; height: 520px; object-fit: cover;
  border: 1px solid rgba(40,60,80,0.12);
  border-top: 3px solid var(--vm-orange);
}
.vm-single-product__placeholder {
  width: 100%; height: 520px; background: #edf0f3;
  border: 1px solid rgba(40,60,80,0.12);
  border-top: 3px solid var(--vm-orange);
  display: flex; align-items: center; justify-content: center;
}
.vm-single-product__placeholder svg { width: 100%; height: 100%; }
.vm-single-product__details {
  display: flex; flex-direction: column; justify-content: center; padding: 1rem 0;
}
.vm-single-product__name {
  font-family: var(--font-display); font-size: clamp(28px,3vw,44px);
  font-weight: 300; color: var(--vm-ink); margin-bottom: 0.5rem; line-height: 1.15;
}
.vm-single-product__variant { font-size: 13px; color: var(--vm-text-muted); font-weight: 300; margin-bottom: 1.5rem; }
.vm-single-product__price {
  font-size: 24px; font-weight: 700; color: var(--vm-ink);
  margin-bottom: 1.5rem; display: flex; align-items: center; gap: 10px;
}
.vm-single-product__desc { font-size: 15px; color: var(--vm-text-soft); line-height: 1.8; font-weight: 300; margin-bottom: 2rem; }
.vm-single-product__desc p { margin-bottom: 1em; }
.vm-single-product__meta {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(40,60,80,0.1);
}
.vm-single-product__meta span {
  font-size: 12px; color: var(--vm-text-muted);
  font-family: var(--font-condensed); letter-spacing: 0.06em; text-transform: uppercase;
}
.vm-single-product__meta span::before { content: '✓ '; color: var(--vm-orange); }

/* ── Generic page ── */
.vm-page-content { padding: 4rem 5rem; background: var(--vm-cream); }
.vm-page-content__inner { max-width: 860px; margin: 0 auto; }
.vm-page-content__title {
  font-family: var(--font-display); font-size: clamp(32px,4vw,52px);
  font-weight: 300; color: var(--vm-ink); margin-bottom: 2rem; line-height: 1.1;
}
.vm-page-content__body { font-size: 16px; color: var(--vm-text-soft); line-height: 1.85; font-weight: 300; }
.vm-page-content__body p  { margin-bottom: 1.4em; }
.vm-page-content__body h2 { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--vm-ink); margin: 2rem 0 1rem; }
.vm-page-content__body h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--vm-ink); margin: 1.5rem 0 0.8rem; }
.vm-page-content__body ul,
.vm-page-content__body ol { padding-left: 1.5rem; margin-bottom: 1.4em; }
.vm-page-content__body li { margin-bottom: 0.4em; }
.vm-page-content__body a { color: var(--vm-orange); text-decoration: underline; }
.vm-page-content__body a:hover { color: var(--vm-orange-light); }
.vm-page-content__body blockquote {
  border-left: 3px solid var(--vm-orange); padding: 0.5rem 1.5rem; margin: 1.5rem 0;
  font-family: var(--font-display); font-size: 20px; font-style: italic; color: var(--vm-text-soft);
}

/* ── 404 ── */
.vm-404 {
  min-height: calc(100vh - 68px); padding-top: 68px;
  background: var(--vm-ink); display: flex; align-items: center; justify-content: center; text-align: center;
}
.vm-404__inner { padding: 3rem 2rem; }
.vm-404__num {
  font-family: var(--font-display); font-size: 160px; font-weight: 300;
  color: rgba(40,60,80,0.2); line-height: 1; margin-bottom: -20px;
}
.vm-404__title {
  font-family: var(--font-display); font-size: 42px; font-weight: 300;
  color: var(--vm-cream); margin-bottom: 1rem;
}
.vm-404__desc { font-size: 15px; color: rgba(242,244,246,0.5); font-weight: 300; margin-bottom: 2.5rem; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .vm-single-product { padding: 3rem 2rem; }
  .vm-single-product__inner { grid-template-columns: 1fr; gap: 2rem; }
  .vm-single-product__img,
  .vm-single-product__placeholder { height: 340px; }
  .vm-page-content { padding: 3rem 2rem; }
}