/* Modal chrome (.bf-notify-modal / .bf-notify-box / .bf-notify-submit /
   .bf-notify-msg / .bf-alert-tick / .bf-alert-link) is shared with the
   restock and price-alert modals; restock-notify.css is enqueued alongside
   this file on brand pages for exactly that reason. Only what is specific to
   the follow button and this modal's own field ids lives here. */

/* ── The button next to the brand name ──────────────────────────────────
   Sits in .bf-brand-hero beside the <h1>, so it aligns to the heading's
   text rather than stretching: the hero is a block container and a
   full-width pill next to a brand name would read as a page-level CTA. */
.bf-brand-follow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  vertical-align: middle;
  margin-left: 14px;
  padding: 8px 16px 8px 13px;
  border: 1.5px solid #e2e2e2;
  border-radius: 999px;
  background: #fff;
  color: #555;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.bf-brand-follow svg { width: 16px; height: 16px; flex: 0 0 auto; }
.bf-brand-follow:hover { color: #ff2e7e; border-color: #ff2e7e; background: #fff0f6; }
.bf-brand-follow:focus-visible { outline: 2px solid #ff2e7e; outline-offset: 2px; }
.bf-brand-follow.is-following { color: #fff; background: #ff2e7e; border-color: #ff2e7e; }
.bf-brand-follow.is-following svg { fill: rgba(255,255,255,.25); }

.bf-follow-label--short { display: none; }

/* Stays on the heading's line on narrow screens too, but with the short
   label: "Follow this brand" plus a long brand name does not fit 375px and
   would wrap anyway, which is the thing being avoided. If a name is long
   enough that even this does not fit, the button wraps as a whole — it is
   inline-flex, so it never breaks across lines mid-label. */
@media (max-width: 600px) {
  .bf-brand-follow { margin-left: 10px; padding: 7px 14px 7px 11px; font-size: 0.8rem; }
  .bf-brand-follow svg { width: 15px; height: 15px; }
  .bf-follow-label--long { display: none; }
  .bf-follow-label--short { display: inline; }
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
#bf-brand-modal .bf-notify-box { width: 420px; }

#bf-brand-modal .bf-alert-links { justify-content: center; }

#bf-brand-form { flex-direction: column; gap: 10px; }
#bf-brand-form:not([hidden]) { display: flex; }
#bf-brand-email {
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
}
#bf-brand-email:focus { outline: none; border-color: #ff2e7e; }

/* The brand name inside the modal copy: a plain inherit, because the
   theme already owns .bf-brand-name (18px/600 on /brands/) and reusing
   that class made the name tower over the sentence around it. */
.bf-follow-brand { font: inherit; color: inherit; }