/* FAQ inline product recommendation box (DEVS-6210)
   Float layout: card floats right, body content wraps around it.
   Two callout copies in DOM (top + mid) — CSS shows one per breakpoint. */

/* No overflow:hidden — when body content is shorter than the card, the float bleeds
   out of the wrapper so subsequent FAQ content fills the empty space beside the card. */
.vibe-faq-step-box {
  margin: 20px 0;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.vibe-faq-step-box__products {
  float: right;
  clear: right;
  width: 50%;
  margin: 0 0 8px 12px;
}

/* Override shared product-card grid: render as single block column */
.vibe-faq-step-box__products ul.products {
  display: block !important;
  grid-template-columns: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vibe-faq-step-box__products li.product {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Override shared-products.css mobile 2-col rule */
#content .vibe-faq-step-box__products .products > li.product {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
/* NO overflow:hidden here — that would make body a BFC and stop text from
   wrapping under the card. We want true float wrap: lines flow beside the card
   and then full-width once the card ends. */
.vibe-faq-step-box__body {
  min-width: 0;
}

.vibe-faq-step-box__body > h2:first-child,
.vibe-faq-step-box__body > h3:first-child,
.vibe-faq-step-box__body > h4:first-child,
.vibe-faq-step-box__body > h5:first-child {
  margin-top: 0;
}

/* ── Callout (shared) ────────────────────────────────────────────────────── */
.vibe-faq-step-box__callout {
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-left: 3px solid #f29400;
  font-weight: 500;
  color: #333;
  box-shadow: 0 1px 4px rgba(176, 137, 104, 0.08);
  line-height: 1.45;
}

.vibe-faq-step-box__star {
  color: #f29400;
  font-weight: 700;
  margin-right: 4px;
}

.vibe-faq-step-box__label {
  color: #000;
  font-weight: 700;
  margin-right: 4px;
}

.vibe-faq-step-box__product-link {
  color: #000 !important;
  text-decoration: underline;
  font-weight: 700;
}

.vibe-faq-step-box__product-link:hover {
  color: #f29400 !important;
  text-decoration: none;
}

/* ── Mobile (default): top badge full-width above; mid badge hidden ──────── */
.vibe-faq-step-box__callout--top {
  display: block;
  margin: 0 0 10px;
}

.vibe-faq-step-box__callout--mid {
  display: none;
}

/* ── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  .vibe-faq-step-box__products {
    width: 200px;
    margin: 0 0 12px 20px;
  }

  .vibe-faq-step-box__callout--top {
    display: none;
  }

  .vibe-faq-step-box__callout--mid {
    display: block;
    overflow: hidden; /* BFC so the badge box stays beside the float, not under it */
    margin: 10px 0;
  }
}