/*
 * The slist order button starts collapsed.
 *
 * Live hides these fields in JavaScript, so there is no rule to capture — but
 * doing it in CSS is better: hidden from the first paint, there is no flash of
 * a tall card collapsing once the script runs.
 *
 * The state class sits on the FORM rather than on the button, because
 * `.form-inner` comes BEFORE the button in the markup and no sibling combinator
 * reaches backwards. scripts/ordersubmit.ts removes it on the first press.
 *
 * If that script never runs the class stays and the fields stay hidden — so
 * the button also carries a plain link fallback in `data-href`, and the form
 * still submits.
 */
.slist-post .slist-order.is-collapsed .form-inner {
  display: none;
}

/*
 * The order form runs the full width of its column, on both layouts.
 *
 * The theme pins `.form-inner` to `width: 205px; margin-left: auto`, which
 * leaves the email field and the terms line half the width of the button above
 * them. Measured against live, which has all three the same width:
 *
 *   live  desktop: inner/email/check/button all 410 wide at x=494
 *   ours  desktop: inner/email/check 205 at x=699, button 410 at x=494
 *   ours  mobile:  the same split, 205 against a 350 button
 *
 * Both variants, not just mobile: live's desktop card does this too.
 */
.slist-post .slist-btn .form-inner {
  /* The theme pins this to a fixed `width: 205px` with `margin-left: auto`,
     which is the width of the desktop card's right-hand column. Both have to
     go, not just the margin — resetting the margin alone moved the fields to
     the left edge and left them 205px wide under a 350px button. */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.slist-post .slist-btn .form-inner input[type="email"],
.slist-post .slist-btn .form-inner .form-check {
  width: 100%;
}

/*
 * Clear the taste caption when the order form expands.
 *
 * .slist-circle__container is absolutely positioned at top: calc(100% + 10px)
 * on .slist-center, so it hangs 52px below that box and reserves no space in
 * the flow. Collapsed, that is fine: the button starts to the right of the
 * caption and the two never meet -- the original site behaves identically,
 * measured against it.
 *
 * Our two-step expand puts a full-width e-post field where the button was, and
 * it runs straight under the caption. Pushing the revealed block down by 64px
 * -- the measured overlap at both 768px and 1024px, plus a gap -- puts the
 * field below the caption instead of on top of it.
 *
 * Only from 768px up: below that the card stacks and there is no collision.
 */
@media (min-width: 768px) {
  .slist-post .slist-order:not(.is-collapsed) .form-inner {
    margin-top: 64px;
  }
}