/* Subscribe band (U6/U7). Marca, línea and talle, in that order — the site's
   one ordering. The chips are radios and not links: here the state belongs to
   the form, not to a URL. */
.subscribe {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); padding: var(--sp-lg);
  display: flex; flex-direction: column; gap: var(--sp-sm);
}
.subscribe-lead { margin: 0; }
.subscribe-note { margin: 0; }
.subscribe .chips { margin-top: 0; }
.subscribe-form { display: flex; flex-direction: column; gap: var(--sp-sm); }
.subscribe-submit { display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: flex-start; }
/* The field and its message travel together, so the error stays beside the
   field in both directions (in a row and stacked). */
.subscribe-field {
  display: flex; flex-direction: column; gap: var(--sp-2xs);
  flex: 1 1 220px; min-width: 0;
}
/* The button's label names the whole scope, so it can run long: let it wrap
   onto a second line rather than run outside the band. */
.subscribe-submit .btn { white-space: normal; max-width: 100%; }

/* The input is absolute *inside a relative label*. With no positioned ancestor
   it falls at its static position measured against the initial containing
   block, and inside a scrolling row that is what made the whole page scroll
   sideways in V10. */
.chip-radio { position: relative; cursor: pointer; }
.chip-radio input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
/* Hover belongs only to the ones that are **not** chosen. Written without the
   `:not()`, `.subscribe .chip-radio:hover` beats
   `.chip-radio:has(input:checked)` on specificity — three classes against two —
   so hovering the chip just chosen handed it back the white background and left
   the text white: the label vanished right where the person had touched. */
.chip-radio:not(:has(input:checked)):hover { background: var(--surface); }
.subscribe .chip-radio:not(:has(input:checked)):hover { background: var(--bg); }
.chip-radio:has(input:checked) {
  background: var(--primary); border-color: var(--primary);
  color: var(--bg); font-weight: 600;
}
/* And over a chosen one, hover is the one DESIGN.md calls for: teal profundo. */
.chip-radio:has(input:checked):hover {
  background: var(--primary-deep); border-color: var(--primary-deep);
}
/* Focus is always visible: the input is invisible, so the ring is drawn by the
   chip containing it. */
.chip-radio:has(input:focus-visible) {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* Each marca's línea row appears when that marca is chosen — `:has()` and
   nothing else, because signing up has to work without JavaScript. Every row
   sends its own field, so the marca the person walked away from leaves no
   hidden state in the POST. */
.subscribe-lines { display: none; }
.subscribe-form:has(#marca-huggies:checked) .subscribe-lines[data-brand="huggies"],
.subscribe-form:has(#marca-pampers:checked) .subscribe-lines[data-brand="pampers"],
.subscribe-form:has(#marca-babysec:checked) .subscribe-lines[data-brand="babysec"] {
  display: flex;
}

/* The field is drawn here and measured by `.subscribe-field`. It used to carry
   `flex: 1 1 220px`, written for a row, and that `flex-basis` turned back into a
   220px *height* every time a container went to column: on the phone first and
   on the desktop later, when the error message moved beside the field. An input
   doesn't pick its place; its container does. */
.field {
  background: var(--bg); color: var(--ink); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 16px; font: inherit; min-height: 44px;
  width: 100%;
}
.field::placeholder { color: var(--muted); }
.field:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-color: var(--primary); }
/* The border accompanies the message; it never replaces it (DESIGN.md
   §Inputs). */
.field[aria-invalid="true"] { border-color: var(--verdict-high); }

/* The error is said in words, never in color alone, and it sits beside the
   control it speaks about. */
.field-error {
  margin: 0; color: var(--verdict-high); font-size: 0.875rem;
}

@media (max-width: 640px) {
  /* Full width: two controls of different widths left a ragged right edge, and
     the button is what gets tapped one-handed. */
  .subscribe-submit { flex-direction: column; align-items: stretch; }
  .subscribe-field { flex: 0 0 auto; }
  .subscribe-submit .btn { width: 100%; }
}