/* mesh — Seguir / Siguiendo toggle. Two variants:
   .is-prominent  → filled primary pill with label (space single-page hero).
   .is-compact    → icon-only 46px circle, matches the Save/Rec/Share row.
   Hardened with !important so Elementor/theme button styles can't bleed in
   (same issue that repainted the header bell). */

.mesh-follow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Space Grotesk", system-ui, sans-serif;
}

.mesh-follow .mesh-follow-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 !important;
  border: 2px solid #111 !important;
  background: #6b5bd2 !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  border-radius: 999px !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.mesh-follow .mesh-follow-btn:active { transform: scale(.96); }
.mesh-follow .mesh-follow-btn .ti { font-size: 18px; line-height: 1; }

/* ── Prominent (single page hero) ─────────────────────────────── */
.mesh-follow.is-prominent .mesh-follow-btn {
  height: 44px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  box-shadow: 3px 3px 0 rgba(17, 17, 17, .18) !important;
}
.mesh-follow.is-prominent .mesh-follow-btn:hover { background: #5b4cc0 !important; }
/* Following → outlined "done" state. */
.mesh-follow.is-prominent.is-following .mesh-follow-btn { background: #fff !important; color: #111 !important; }
.mesh-follow.is-prominent.is-following .mesh-follow-btn:hover { background: #fdecec !important; color: #c0201b !important; border-color: #c0201b !important; }

/* ── Compact (cards / search / map / inside the Save widget) ─────
   Mirror .mesh-inline-btn's exact box model so it sits flush with the
   Save/Rec buttons (min-width + horizontal padding, NOT a fixed square). */
.mesh-follow.is-compact .mesh-follow-btn {
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 16px !important;
  gap: 7px;
  border: 1px solid rgba(0, 0, 0, .16) !important;
  background: #fff !important;
  color: #1a1a1a !important;
}
.mesh-follow.is-compact .mesh-follow-btn .ti { font-size: 22px !important; }
/* On public listing cards (.mesh-inline) the follow button sits beside the
   icon-only shelf, which is a perfect 46px circle. The padded pill above reads
   as a slightly wider oval next to it, so square it to a matching 46px circle. */
.mesh-inline .mesh-follow.is-compact .mesh-follow-btn {
  width: 46px !important; min-width: 46px !important; padding: 0 !important; gap: 0 !important;
}
.mesh-follow.is-compact .mesh-follow-btn:hover { border-color: #6041d5 !important; color: #6041d5 !important; background: #fff !important; }
/* Following → filled purple (mirrors the Save "is-on" look). */
.mesh-follow.is-compact.is-following .mesh-follow-btn { background: #6041d5 !important; border-color: #6041d5 !important; color: #fff !important; }
.mesh-follow.is-compact.is-following .mesh-follow-btn:hover { background: #fdecec !important; border-color: #c0201b !important; color: #c0201b !important; }

/* Follower count chip (prominent only) */
.mesh-follow-count { font-size: 13px; font-weight: 600; color: #555; }

@media (prefers-reduced-motion: reduce) {
  .mesh-follow .mesh-follow-btn { transition: none; }
}

/* ── Logged-out "create account" modal (persistent-follow prompt) ──────────── */
.mesh-follow-signup {
  position: fixed; inset: 0; z-index: 100000;
  display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(17, 17, 17, .6);
}
.mesh-follow-signup.is-open { display: flex; }
/* Brutalist JOIN MESH match (shared look with the shelf modal). */
.mesh-follow-signup .mfs-card {
  position: relative; width: 100%; max-width: 420px;
  background: #f5f2eb !important; border: 3px solid #0a0a0a; border-radius: 4px;
  box-shadow: 10px 10px 0 rgba(10, 10, 10, .9); padding: 30px 28px 26px; text-align: center;
  font-family: "Space Grotesk", system-ui, sans-serif; color: #0a0a0a;
}
.mesh-follow-signup .mfs-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  display: flex !important; align-items: center; justify-content: center;
  border: 2px solid #0a0a0a !important; background: #fff !important; color: #0a0a0a !important;
  cursor: pointer; border-radius: 2px !important; box-shadow: none !important;
  padding: 0 !important; line-height: 1 !important;
}
.mesh-follow-signup .mfs-x .ti { font-size: 20px; line-height: 1; }
.mesh-follow-signup .mfs-x:hover { background: #ffe135 !important; }
.mesh-follow-signup .mfs-ic {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 8px;
  background: #efedfe; color: #6041d5; display: flex; align-items: center; justify-content: center;
  border: 2px solid #0a0a0a;
}
.mesh-follow-signup .mfs-ic .ti { font-size: 26px; }
.mesh-follow-signup .mfs-h {
  font-family: "Barlow Condensed", system-ui, sans-serif; font-weight: 800;
  font-size: 30px; line-height: 1.02; margin: 0 0 8px; text-transform: uppercase; color: #0a0a0a;
}
.mesh-follow-signup .mfs-sub { font-size: 14px; color: #444; margin: 0 0 22px; line-height: 1.4; }
.mesh-follow-signup .mfs-cta {
  display: block; width: 100%; padding: 15px; box-sizing: border-box;
  background: #0a0a0a !important; color: #ffe135 !important; border: 3px solid #0a0a0a !important;
  border-radius: 2px !important; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; box-shadow: 5px 5px 0 #6041d5 !important; transition: transform .1s ease;
}
.mesh-follow-signup .mfs-cta:hover { background: #1a1a1a !important; transform: translate(-1px, -1px); }
.mesh-follow-signup .mfs-login {
  display: inline-block; margin-top: 18px; color: #6041d5; font-weight: 800; font-size: 14px;
  text-decoration: none; border-bottom: 3px solid #ffe135; padding-bottom: 2px;
}
.mesh-follow-signup .mfs-login:hover { background: #ffe135; color: #0a0a0a; }