.gform_wrapper.hap-signup-form_wrapper {
  /* ONE height for every control and the submit button. Change this alone and
     inputs and button stay in step. 3.2rem ~= 51.2px, the card's input height
     (.75rem padding x2 + a 1.6 line on 16px + 2px borders). */
  --hap-field-height: 3.2rem;
  backdrop-filter: blur(10px);
  background: var(--card-strong, rgba(255, 245, 232, 0.94));
  border: 1px solid var(--line, rgba(122, 74, 46, 0.14));
  border-radius: 1.35rem;
  box-shadow: var(--shadow-soft, 0 12px 28px rgba(60, 31, 17, 0.09));
  padding: 1.25rem;
}

/* Inside the contact card the wrapper must NOT paint its own card — the block
   already supplies the background, border, radius, shadow and padding, and two
   nested cards read as a box in a box. */
.contact-card .gform_wrapper.hap-signup-form_wrapper {
  backdrop-filter: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Matches .order-form's offset from the card copy above it. */
.contact-card__embed {
  margin-top: 1rem;
}

/* ---- Heading ---- */
.hap-signup-form_wrapper .gform_heading {
  margin: 0;
}

.hap-signup-form_wrapper .gform_title {
  color: var(--ink, #2f221d);
  /* .contact-card h3 — the theme sets Fraunces from a bare `h2, h3` selector
     (specificity 0,0,1), which any class-based rule would outrank. */
  font-family: "Fraunces", serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.08;
  margin: 0;
}

.hap-signup-form_wrapper .gform_description {
  color: var(--muted, #654e40);
  display: block;
  margin: 0.8rem 0 0;
}

.hap-signup-form_wrapper .gform_required_legend {
  color: var(--wp--preset--color--form-muted, #7a6a5d);
  font-size: 0.9rem;
  margin: 0.8rem 0 0;
}

.hap-signup-form_wrapper .gfield_required_asterisk,
.hap-signup-form_wrapper .gform_required_legend .gfield_required {
  color: var(--rust-deep, #8e371c);
  font-weight: 800;
}

/* ---- Controls: variables on the child, not the wrapper ---- */
.hap-signup-form_wrapper .gform-body {
  --gf-ctrl-bg-color: rgba(255, 255, 255, 0.72);
  --gf-ctrl-border-color: #d9bca7;
  --gf-ctrl-border-color-hover: #d9bca7;
  --gf-ctrl-border-color-focus: #ca6a34;
  --gf-ctrl-outline-color-focus: rgba(202, 106, 52, 0.16);
  --gf-ctrl-color: var(--ink, #2f221d);
  --gf-ctrl-radius: 0.8rem;
  --gf-ctrl-label-color-primary: var(--wp--preset--color--form-label, #4e392f);
  --gf-ctrl-label-color-req: var(--rust-deep, #8e371c);
  --gf-ctrl-desc-color: var(--wp--preset--color--form-muted, #7a6a5d);
  /* GF sizes controls by a FIXED block-size with --gf-ctrl-padding-y:0 and the
     text centred — it does not add padding to a content height. Fighting that
     with auto + vertical padding stacked the two and overshot. So: set the
     height directly. 3.2rem ~= the card's 51.6px (.75rem padding x2 + a 1.6
     line on 16px + 2px borders). THIS is the number to nudge. */
  --gf-ctrl-size: var(--hap-field-height);
  --gf-ctrl-padding-x: 0.8rem;
  --gf-ctrl-padding-y: 0;
  --gf-ctrl-font-size: 1rem;
  --gf-ctrl-label-font-size-primary: 1rem;
  --gf-radius: 0.8rem;
  /* The block's own accent, in case a rule inside the body reads it. */
  --gf-color-primary: var(--rust, #b5532d);
  --gf-color-in-ctrl-primary: var(--rust, #b5532d);
  margin: 1rem 0 0;
}

.hap-signup-form_wrapper .gform_fields {
  grid-row-gap: 0.85rem;
  row-gap: 0.85rem;
}

.hap-signup-form_wrapper .gfield_label {
  font-weight: 700;
  margin-block-end: 0.38rem;
}

.hap-signup-form_wrapper .gfield input {
  width: 100%;
}

.hap-signup-form_wrapper .gfield input:focus {
  border-color: #ca6a34;
  outline: 2px solid rgba(202, 106, 52, 0.16);
}

/* ---- Footer ---- */
.hap-signup-form_wrapper .gform-footer,
.hap-signup-form_wrapper .gform_footer {
  margin: 0.85rem 0 0;
  padding: 0;
}

/* Solid rust via the variable — this one cannot lose on specificity, and is the
   fallback if the gradient rule below ever does. */
.hap-signup-form_wrapper .gform-footer,
.hap-signup-form_wrapper .gform_footer {
  --gf-ctrl-btn-bg-color-primary: var(--rust, #b5532d);
  --gf-ctrl-btn-color-primary: var(--wp--preset--color--white, #fff);
  --gf-ctrl-btn-border-color-primary: transparent;
  --gf-ctrl-btn-radius: 999px;
  --gf-ctrl-btn-size: var(--hap-field-height);
  --gf-ctrl-btn-padding-y: 0;
}

/* Full WIDTH comes from the form's button width setting, which adds
   .gform-button--width-full and is applied with !important by GF's foundation
   sheet — a stylesheet cannot win that, and should not try. What is left here
   is the card's gradient and pill shape, at five classes to outrank GF's own
   four-class rule (.gform-theme.gform-theme--framework.gform_wrapper .button). */
.gform_wrapper.gform-theme.hap-signup-form_wrapper .gform-footer .gform_button,
.gform_wrapper.gform-theme.hap-signup-form_wrapper .gform_footer .gform_button {
  align-items: center;
  background: linear-gradient(135deg, var(--rust, #b5532d), #d87538);
  block-size: var(--hap-field-height);
  border: none;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(181, 83, 45, 0.24);
  color: var(--wp--preset--color--white, #fff);
  display: inline-flex;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 800;
  justify-content: center;
  /* Horizontal only — vertical padding here would fight block-size. */
  padding: 0 1.25rem;
  white-space: normal;
}

.hap-signup-form_wrapper .form-note {
  color: var(--wp--preset--color--form-muted, #7a6a5d);
  /* .gform_footer is display:flex;flex-wrap:wrap, so the note is a flex item
     next to the button until it is given a full-width basis of its own. */
  flex: 0 0 100%;
  font-size: 0.92rem;
  margin: 0;
}

/* ---- Confirmation keeps the card ---- */
.gform_confirmation_wrapper.hap-signup-form_wrapper,
.hap-signup-form_wrapper .gform_confirmation_message {
  color: var(--ink, #2f221d);
}

/* site.css tightens .contact-card padding at this width; match it. */
@media (max-width: 540px) {
  .gform_wrapper.hap-signup-form_wrapper {
    padding: 1rem;
  }
}