/* ===================================================================
   NS Product Pages Custom CSS — ns-product-custom.css
   Loaded via ProductExtraContent hook or theme custom.css inclusion
   VitC Bipack (ns-vitc-bp) + VitC Mono (ns-vitc)
   2026-06-06
=================================================================== */

/* ── Shared reset ────────────────────────────────────────────────── */
.ns-vitc-bp, .ns-vitc {
  font-family: inherit;
  color: #1a2030;
  line-height: 1.6;
}
.ns-vitc-bp *, .ns-vitc * {
  box-sizing: border-box;
}

/* ── VitC Bipack animations ──────────────────────────────────────── */
@keyframes bpUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bpPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}
.ns-vitc-bp .bp-a  { animation: bpUp .6s ease both; }
.ns-vitc-bp .bp-a2 { animation: bpUp .6s .15s ease both; }

/* ── VitC Mono animations ────────────────────────────────────────── */
@keyframes vcUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vcShine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.ns-vitc .vc-a  { animation: vcUp .6s ease both; }
.ns-vitc .vc-a2 { animation: vcUp .6s .15s ease both; }

/* ── Bipack Hero section ─────────────────────────────────────────── */
.ns-vitc-bp .bp-hero {
  background: linear-gradient(135deg, #b71c1c 0%, #e65c00 60%, #f9a825 100%);
  color: #fff;
  border-radius: 18px;
  padding: 36px 32px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.ns-vitc-bp .bp-hero::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}

/* ── Mono Hero section ───────────────────────────────────────────── */
.ns-vitc .vc-hero {
  background: linear-gradient(135deg, #e65c00 0%, #f9a825 100%);
  color: #fff;
  border-radius: 18px;
  padding: 36px 32px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

/* ── CTA section ─────────────────────────────────────────────────── */
.ns-vitc-bp .bp-cta {
  background: linear-gradient(135deg, #b71c1c, #e65c00);
  color: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
}
.ns-vitc .vc-cta {
  background: linear-gradient(135deg, #bf360c, #e65c00);
  color: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
}

/* ── Pulsating element ───────────────────────────────────────────── */
.bp-pulse {
  animation: bpPulse 3s infinite;
}

/* ── Section headings ────────────────────────────────────────────── */
.ns-vitc-bp h2.bp-heading,
.ns-vitc h2.vc-heading {
  font-size: 20px;
  font-weight: 700;
  color: #b71c1c;
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 3px solid #e65c00;
}