/* ── Vendor page — additional styles ──────────────────────────────────── */
/* styles.css is the shared base. Only vendor-page-specific rules go here. */

/* Nav: anchor used as a pill button — avoids inline style="" on <a> tags */
.nav-btn-anchor {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Nav: highlight the active page link — avoids inline style="color:..." */
.nav-link--active {
  color: var(--cream);
}

/* Hero: float card with smaller, muted value text (used on vendor stat card) */
.fc-value--sm {
  font-size: 14px;
  color: var(--plum-l);
}

/* Benefits grid — 2-column layout for 4 benefit cards.                    */
/* Reuses .step-card, .step-icon, .step-title, .step-body from styles.css. */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

/* CTA section: anchor styled as a button */
.cta-btn-anchor {
  text-decoration: none;
  display: inline-block;
}

/* Category select — matches existing .input-wrap input appearance */
.input-wrap select {
  width: 100%;
  background: rgba(250,247,244,.06);
  border: 1px solid rgba(176,128,64,.2);
  border-radius: 12px;
  padding: 14px 44px 14px 18px;
  font-size: 14px;
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color .2s, background .2s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A6878' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.input-wrap select:focus {
  border-color: rgba(176,128,64,.5);
  background-color: rgba(250,247,244,.09);
}
.input-wrap select option {
  background: #1C1018;
  color: #FAF7F4;
}
/* Muted colour when the placeholder option is selected */
.input-wrap select.select-placeholder {
  color: var(--muted);
}

/* "Other" free-text input — hidden until Other is chosen in the select */
.input-reveal {
  display: none;
  margin-top: 8px;
  width: 100%;
}
.input-reveal.visible {
  display: block;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .benefits-grid { grid-template-columns: 1fr; }
}