/* Heinz giveaway form. Deliberately plain: it inherits the theme's type and
   colour, and only lays the fields out. */
.tg-heinz { max-width: 720px; margin-inline: auto; }
.tg-heinz__intro { margin-bottom: 2rem; }
/* The fieldset is a GRID, which is what makes the legend behave.
   A legend is painted on the fieldset's border, and the usual dodge -
   `float: left; width: 100%` - puts it in flow but leaves it a float, so the
   FIRST field after it wraps alongside and is squashed against the right edge.
   (Only the address fieldset escaped that, because it was already a grid and a
   grid item's float is ignored.) Making every fieldset a grid blockifies the
   legend, so it sits above the fields with no float to wrap around. */
.tg-heinz__form fieldset {
	display: grid; align-content: start;
	border: 1px solid rgba(128,128,128,.3); border-radius: 10px;
	padding: 1.25rem 1.25rem .25rem; margin: 0 0 1.5rem;
}
.tg-heinz__form legend { float: none; width: 100%; font-weight: 700; margin-bottom: .75rem; padding: 0; }
.tg-heinz__field { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1rem; }
.tg-heinz__field label { font-weight: 600; font-size: .95rem; }
.tg-heinz__field input,
.tg-heinz__field select {
	width: 100%; padding: .7rem .8rem; font: inherit; color: inherit;
	background: #fff; border: 1px solid rgba(128,128,128,.45); border-radius: 8px;
}
.tg-heinz__field input:focus-visible,
.tg-heinz__field select:focus-visible { outline: 2px solid #5faf2d; outline-offset: 1px; border-color: #5faf2d; }
/* :user-invalid, never :invalid:not(:placeholder-shown) - the latter matches a
   field with no placeholder attribute at all, so every required field would be
   outlined red before anyone typed. */
.tg-heinz__field input:user-invalid,
.tg-heinz__field select:user-invalid { border-color: #c0392b; }
.tg-heinz__req { color: #c0392b; }
.tg-heinz__submit {
	font: inherit; font-weight: 700; cursor: pointer;
	padding: .85rem 1.6rem; border: 0; border-radius: 999px;
	background: #5faf2d; color: #fff;
}
.tg-heinz__submit:hover:not(:disabled) { background: #4e9325; }
.tg-heinz__submit:disabled { opacity: .6; cursor: progress; }
.tg-heinz__note { font-size: .85rem; opacity: .75; margin-top: .75rem; }
.tg-heinz__message:empty { display: none; }
.tg-heinz__message { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 8px; }
.tg-heinz__message.is-error { background: #fdecea; color: #a93226; }
.tg-heinz__message.is-success { background: #eaf7e4; color: #2f6b21; }
.tg-heinz__soldout { padding: 1rem 1.25rem; border-radius: 10px; background: rgba(128,128,128,.12); font-weight: 600; }
/* Off-canvas rather than display:none, which some bots test for. */
.tg-heinz__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 620px) {
	.tg-heinz__address { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
	.tg-heinz__address legend { grid-column: 1 / -1; }
}