/* Otzar HaShliach — STaM line. Extends style.css, overrides nothing in it. */
.hero--stam { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.stam__hero { text-align: center; }
.hero--stam h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.02;
  letter-spacing: -0.025em; margin: var(--space-3) auto 0; max-width: 22ch; text-wrap: balance;
}
.hero--stam .hero__lede { margin: var(--space-5) auto 0; max-width: 56ch; }
.hero--stam .hero__cta { justify-content: center; }
.hero--stam .hero__facts { max-width: 32rem; margin-inline: auto; justify-content: center; }
#catalog { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }

/* the struck-through list price sits inside .card__per, already muted */
.card__per s { opacity: .8; }

/* "save an additional $X" is too long to sit beside the Add button, and
   style.css pins .card__per to one line. Two rows: price + Add on top, the
   saving on its own full-width row underneath. */
.card__foot { display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; row-gap: .35rem; align-items: end; }
.card__foot > .card__per { grid-column: 1 / -1; }
/* deliberate two-line stack: struck price, then the saving. Keeps the phrase
   and its number together instead of wrapping mid-sentence in a narrow card. */
.card__per s, .card__per span { display: block; white-space: nowrap; }

/* qty stepper on the card + in the detail sheet */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.qty button {
  width: 1.9rem; background: var(--color-surface); border: 0; color: var(--color-text);
  font-size: var(--text-sm); line-height: 1; cursor: pointer;
}
.qty button:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.qty input {
  width: 2.6rem; border: 0; border-inline: 1px solid var(--color-border); text-align: center;
  background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; padding: .3rem 0;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.card__foot { align-items: end; }

/* style.css sets .card{display:flex} which beats the UA [hidden] rule,
   so filtered-out cards kept rendering. */
.grid .card[hidden], .grid .grid__cat[hidden], .grid .empty[hidden] { display: none !important; }

/* mobile tray: keep the button on one line */
@media (max-width: 520px) {
  .tray { gap: .6rem; }
  .tray__t { font-size: .8rem; line-height: 1.3; }
  .tray .btn { white-space: nowrap; padding-inline: .8rem; font-size: .85rem; }
}

/* keep the last row clear of the floating tray */
body:has(.tray[data-open="true"]) #catalog,
body:has(.tray[data-open="true"]) #request { padding-bottom: 6rem; }
.grid__cat .count { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400; }