/* ── Signup-incentive banner ─────────────────────────────────────────
   Shown to logged-out visitors: "10% off your first order" as the primary
   CTA, guest checkout kept secondary / lower visual weight. Brand identity:
   Bebas Neue headline, DM Sans body, cream/dark/raspberry, 0px radius.
   Reused on the homepage strip, the checkout (guest), and the item page. */

.lv-signup-incentive {
  display: flex;
  align-items: flex-start;      /* actions align to the top text lines, not centered against the whole box */
  justify-content: space-between;
  gap: 14px 32px;
  flex-wrap: wrap;
  box-sizing: border-box;
  background: #F2F0EA;
  border-left: 6px solid #E5265A; /* raspberry accent is the only border treatment */
  border-radius: 0;
  padding: 14px 24px;
}

.lv-signup-incentive-text { flex: 1 1 320px; min-width: 260px; }

.lv-signup-incentive-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E5265A;
  margin: 0 0 6px;
}

.lv-signup-incentive-headline {
  font-family: "Bebas Neue", "DM Sans", sans-serif;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 0.98;
  letter-spacing: 0.02em;
  color: #1A1A18;
  margin: 0 0 6px;
}

.lv-signup-incentive-body {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #4A4A46;
  margin: 0;
  max-width: 52ch;
}

/* Right column: a normal CTA + supporting microcopy on the cream background —
   raspberry stays a pointed accent (the button), never a large filled block. */
.lv-signup-incentive-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;     /* button sizes to its content (a normal button, not a full-width block) */
  gap: 6px;                    /* tight CTA + microcopy pairing */
  flex: 0 0 auto;
  max-width: 230px;
}

.lv-signup-incentive-cta {
  display: inline-block;       /* content-width button */
  align-self: flex-start;
  text-align: center;
  background: #E5265A;
  color: #FFFFFF;
  border: 1.5px solid #E5265A;
  border-radius: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.lv-signup-incentive-cta:hover { background: #c81f4d; border-color: #c81f4d; }

/* Supporting microcopy — plain running text on cream, same weight as the body
   paragraph on the left, not inside any coloured block. */
.lv-signup-incentive-guest {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: #4A4A46;
  margin: 0;
  max-width: 210px;
  text-align: left;
}
.lv-signup-incentive-guest a {
  color: #1A1A18;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Compact variant for tighter surfaces (item page, checkout column). */
.lv-signup-incentive--compact { padding: 12px 18px; gap: 12px 20px; }
.lv-signup-incentive--compact .lv-signup-incentive-headline { font-size: clamp(22px, 3.4vw, 30px); }
.lv-signup-incentive--compact .lv-signup-incentive-cta { padding: 11px 20px; font-size: 11px; }

/* Homepage strip section: tighten the padding so the banner leads into the
   grid below instead of floating with a big empty gap before "ALL RELICS".
   Left/right padding stays inherited from .main-section (48 desktop / 24 mobile)
   so the card keeps aligned with the grid content. */
#signupIncentiveStrip { padding-top: 32px; padding-bottom: 8px; }

@media (max-width: 640px) {
  #signupIncentiveStrip { padding-top: 20px; padding-bottom: 8px; }

  /* ── Banner card on narrow screens ── */
  .lv-signup-incentive {
    padding: 18px 20px;
    gap: 16px 22px;                 /* row gap between the text block and the actions once stacked */
    border-left-width: 5px;
  }
  /* Text takes the full width; the actions drop cleanly below it. */
  .lv-signup-incentive-text { flex-basis: 100%; min-width: 0; }
  .lv-signup-incentive-actions { width: 100%; max-width: none; align-items: flex-start; }
  /* Content-width button — never full-width (no ad-banner block); the padding
     keeps a comfortable ~44px touch target without stretching it. */
  .lv-signup-incentive-cta { align-self: flex-start; width: auto; padding: 13px 28px; }
  .lv-signup-incentive-guest { max-width: none; }
}