/*
 * VARIATION SELECTION — the availability line beside the price.
 *
 * SCOPE. One class, `.lf-pdp__avail`, used on no other page. Everything else
 * about the product page's variation controls is unchanged and lives where it
 * already lived; this file exists so that adding one line of presentation does
 * not mean editing `style.css`, which another workstream currently has open.
 *
 * WHY THE SPACE IS RESERVED. The line appears the moment a customer selects an
 * out-of-stock size, and without a reserved slot the "Add to basket" button
 * moved 44px down the page at exactly the moment they were about to press it —
 * measured across all seven widths. The page already solves this twice, the
 * same way, for the colour-availability notice and the combination status, so
 * this follows that precedent rather than inventing a third answer.
 *
 * Reserved ONLY on products that can actually show it. 28 of the catalogue's
 * 339 variations are out of stock; the rest would carry an empty band for
 * nothing.
 */

.lf-pdp__avail {
  margin: .55rem 0 0;
  font-size: .875rem;          /* 14px — substantive copy, not a label */
  line-height: 1.5;
  color: var(--lf-taupe-deep);
}
.lf-pdp__avail::before {
  content: "";
  display: inline-block;
  width: .45rem; height: .45rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--lf-taupe-mid);
  vertical-align: middle;
}

/* The slot, on products with something that can be said in it. `hidden` still
   hides the text; the height is held by the wrapper rule below. */
.lf-pdp__avail.is-reserved[hidden] {
  display: block !important;   /* beats [hidden] in the theme's own reset */
  visibility: hidden;
}

/* ================================ the collection line beside the buy button */
/*
 * A CHANGING SENTENCE MUST NOT CHANGE THE PAGE'S HEIGHT.
 *
 * On the twelve products whose options span two delivery classes, the buy
 * line's pre-selection sentence ("…from £39, depending on the option you
 * choose") wraps to two lines at 390, 430 and 1024 while the resolved sentence
 * ("…£49 if we need to collect it") fits on one. Choosing an option therefore
 * pulled Add to Basket up by 22px — measured — at exactly the moment the
 * customer was reaching for it.
 *
 * Both sentences occupy one grid cell; the hidden one is rendered but not
 * shown, so the cell is always as tall as the taller of the two at whatever
 * width the column happens to be. No breakpoints to keep in step with two
 * translatable strings, and `visibility: hidden` keeps the sizer out of the
 * accessibility tree as well as out of sight.
 *
 * Only emitted where the text can change — see `inc/returns-cost.php`. A
 * single-class product has one sentence and needs none of this.
 */
.lf-buydel__slot { display: grid; }
.lf-buydel__slot > * { grid-area: 1 / 1; }
.lf-buydel__sizer { visibility: hidden; }