/* Blocuri vizuale în paginile de produs (2 nov 2026, fondatorul: „prea mult text, mai multe iconițe și grafice”).
   Iconițe Lucide inline (<i data-icon> → svg la build), culori fixe pe nuanțe, lizibile pe fundal deschis și închis. */
.vx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: .9rem; margin: 1.4rem 0 1.6rem; padding: 0; }
.vx-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--divider); }
.vx-card b { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin-top: .35rem; }
.vx-card span { font-size: .92rem; line-height: 1.45; color: var(--text-soft); }
.vx-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; flex: none; background: var(--vx-bg); color: var(--vx-fg); }
.vx-ic svg { width: 24px; height: 24px; }
.vx-c1 { --vx-bg: rgba(59, 130, 246, .14); --vx-fg: #2f6fe0; }
.vx-c2 { --vx-bg: rgba(139, 92, 246, .14); --vx-fg: #7c4ee4; }
.vx-c3 { --vx-bg: rgba(20, 184, 166, .15); --vx-fg: #0f9488; }
.vx-c4 { --vx-bg: rgba(245, 158, 11, .16); --vx-fg: #c97a06; }
.vx-c5 { --vx-bg: rgba(236, 72, 153, .14); --vx-fg: #d23c86; }
.vx-c6 { --vx-bg: rgba(34, 197, 94, .15); --vx-fg: #16a34a; }

/* Graficul „Trend”: o săptămână, somn, durere de cap, medicament */
.vx-trend { margin: 1.4rem 0 1.6rem; padding: 1.2rem 1.2rem 1rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--divider); }
.vx-trend svg { display: block; width: 100%; height: auto; }
.vx-trend .vx-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: .8rem 0 0; padding: 0; list-style: none; font-size: .88rem; color: var(--text-soft); }
.vx-trend .vx-legend li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.vx-legend .vx-ic { width: 26px; height: 26px; border-radius: 8px; }
.vx-legend .vx-ic svg { width: 15px; height: 15px; }
.vx-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: .7rem; margin: .9rem 0 0; }
.vx-insight { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 16px; background: var(--bg, transparent); border: 1px solid var(--divider); font-size: .92rem; line-height: 1.35; color: var(--text); }
.vx-insight .vx-ic { width: 36px; height: 36px; border-radius: 11px; }
.vx-insight .vx-ic svg { width: 19px; height: 19px; }

/* Pași cu iconițe */
.vx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: .9rem; margin: 1.4rem 0 1.6rem; counter-reset: vx; }
.vx-step { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--divider); counter-increment: vx; }
.vx-step::after { content: counter(vx); position: absolute; top: .9rem; right: 1rem; font-size: .8rem; font-weight: 700; color: var(--text-mute); }
.vx-step b { font-size: 1rem; font-weight: 600; color: var(--text); margin-top: .35rem; }
.vx-step span { font-size: .92rem; line-height: 1.45; color: var(--text-soft); }

/* Etichete cu iconițe */
.vx-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 1.4rem; padding: 0; }
.vx-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem .45rem .45rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--divider); font-size: .93rem; color: var(--text); }
.vx-chip .vx-ic { width: 32px; height: 32px; border-radius: 999px; }
.vx-chip .vx-ic svg { width: 17px; height: 17px; }
.vx-note { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; padding: .8rem 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--divider); font-size: .92rem; color: var(--text-soft); }
.vx-card b::first-letter, .vx-step b::first-letter, .vx-chip > span:last-child::first-letter { text-transform: uppercase; }
@media (max-width: 640px) {
  .vx-cards, .vx-steps { gap: .6rem; }
  .vx-card, .vx-step { display: grid; grid-template-columns: 40px 1fr; column-gap: .8rem; row-gap: .15rem; align-items: start; padding: .85rem .95rem; border-radius: 16px; }
  .vx-card .vx-ic, .vx-step .vx-ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; }
  .vx-card .vx-ic svg, .vx-step .vx-ic svg { width: 21px; height: 21px; }
  .vx-card b, .vx-step b { margin-top: .1rem; }
  .vx-step::after { top: .8rem; right: .9rem; }
}
.vx-step.vx-plain span { color: var(--text); font-size: .95rem; margin-top: .35rem; }
@media (max-width: 640px) { .vx-step.vx-plain { align-items: center; } .vx-step.vx-plain .vx-ic { grid-row: auto; } .vx-step.vx-plain span { margin-top: 0; } }