/* =========================================================================
   BLOG SINGLE — "Boost your AOV" sidebar promo (template-parts/blog/promo-bundle.php)
   -------------------------------------------------------------------------
   Matches the single-post sidebar's own cards (.recent-blogs / .contact-box
   in custom-global.css): white panel, 1px hairline, 16px radius, soft shadow,
   so it sits as one of the sidebar's cards. Tokens throughout.
   ========================================================================= */

/* border-box throughout, so the full-width CTA's padding counts INSIDE the
   card width instead of pushing it past the right edge. */
.varn-fbt,
.varn-fbt *,
.varn-fbt *::before,
.varn-fbt *::after {
  box-sizing: border-box;
}

.varn-fbt {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.varn-fbt__title {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: var(--font-bold);
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--text-heading);
}

/* The "frequently bought together" box: a hairline frame with a label
   notched over its top edge, echoing the reference. */
.varn-fbt__demo {
  position: relative;
  margin-bottom: 20px;
  padding: 24px 16px 18px;
  border: 1.5px solid var(--border-default);
  border-radius: 14px;
}

.varn-fbt__demo-label {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  background: var(--bg-surface);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--font-bold);
  white-space: nowrap;
  color: var(--text-heading);
}

.varn-fbt__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.varn-fbt__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--gray-500);
}

/* The Varn app icon tile: the mark carries its own dark rounded ground, so
   no surface or border under it, and a touch larger to read as the app. */
.varn-fbt__tile--app {
  width: 54px;
  height: 54px;
  background: none;
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(38, 36, 46, 0.20);
}

.varn-fbt__tile--app img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.varn-fbt__plus {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--font-bold);
  color: var(--gray-400);
}

.varn-fbt__save {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--font-semibold);
  color: var(--text-body);
}

.varn-fbt__save strong {
  color: var(--brand-500);
  font-weight: var(--font-bold);
}

/* CTA: Varn's violet, a solid pill filling the card's width. */
.varn-fbt__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--font-semibold);
  color: var(--text-inverse);
  background: var(--violet-600);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition:
    background var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.varn-fbt__cta:hover,
.varn-fbt__cta:focus-visible {
  background: var(--violet-700);
  color: var(--text-inverse);
  transform: translateY(-2px);
}

/* 17 Sep 2026: the sidebar sits inside .blog-single-main, whose global
   `a:hover { color: brand-500 }` outranked the rule above and turned the label
   orange on the violet pill (about 2:1, unreadable). The doubled class wins
   on specificity, and the label and arrow stay white on the darker violet
   (7.9:1). */
a.varn-fbt__cta.varn-fbt__cta:hover,
a.varn-fbt__cta.varn-fbt__cta:focus-visible {
  background: var(--violet-700);
  color: var(--text-inverse);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--violet-600) 35%, transparent);
}

.varn-fbt__cta-icon {
  color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .varn-fbt__cta:hover,
  .varn-fbt__cta:focus-visible {
    transform: none;
  }
}