/* The home page's product sliders. The client's photos were all cut to
   212 x 263; ours come in any shape, so each sits in that same box, whole
   and centred, and every card in a row is as tall as the client's. */
#featured_new_product .product-item-photo img.default_image,
#featured_popular_product .product-item-photo img.default_image {
  width: 100%;
  height: auto;
  aspect-ratio: 212 / 263;
  object-fit: contain;
  background: var(--site-photo);
}

/* The client's sliders were as tall as their tallest card (one with review
   stars under it), measured on their page: 390px on a phone, 598px from
   992px up, plus our buy row (the stepper over Add to Cart on a phone's
   half-width card, beside it wider). */
#featured_new_product, #featured_popular_product { min-height: 490px; }
@media (min-width: 992px) {
  #featured_new_product, #featured_popular_product { min-height: 650px; }
}

/* The theme hung the slider arrows 30-40px outside sliders that span the
   whole window, so the page scrolled sideways; they sit just inside the
   edge instead, still shown on hover. */
.cms-new-home .nav-pos-outside .owl-nav .owl-prev { left: 10px; }
.cms-new-home .nav-pos-outside .owl-nav .owl-next { right: 10px; }

/* The About FAST button's one long line ran 442px wide on a phone; it
   wraps inside the screen. */
.cms-new-home .seo-toggle { white-space: normal; max-width: 100%; }

/* the card's buy row (home.html's card): the kit's stepper, 40px buttons around a 16px number in one square box,
   and the client's black Add to Cart; side by side where the card is wide enough, else the stepper fills its line
   and Add the next. The Short Line sentence (parts.js, past the stock) sits over it in full ink. */
.fas-buy { margin-top: 12px; }
.fas-buy__form { display: flex; flex-wrap: wrap; gap: 8px; }
.fas-step { display: flex; flex: 1 0 124px; align-items: stretch; border: 1px solid var(--site-edge); border-radius: 0; background: var(--site-bg); }
.fas-step button { flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--site-bg); color: var(--site-ink-2); font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; }
.fas-step button:hover, .fas-step button:focus { background: var(--site-band); color: var(--site-ink-2); }
.fas-step button:focus-visible { outline: 2px solid var(--site-ink-2); outline-offset: -2px; }
.fas-buy input.fas-step__qty[type="number"] { flex: 1; min-width: 0; width: 44px; height: 40px; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--site-edge); border-right: 1px solid var(--site-edge); border-radius: 0; background: var(--site-bg); color: var(--site-ink-2); font-family: inherit; font-size: 16px; line-height: 40px; text-align: center; box-shadow: none; -moz-appearance: textfield; appearance: textfield; }
.fas-buy .fas-step__qty::-webkit-inner-spin-button, .fas-buy .fas-step__qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fas-buy .action.tocart.primary { display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 0; font-size: 14px; text-transform: uppercase; }
.fas-buy a.action.tocart.primary { width: 100%; color: var(--site-dark-fg); text-decoration: none; }
.fas-card-split { margin-top: 10px; }
.fas-card-split [hidden] { display: none; }
.fas-card-split__line { margin: 0; color: var(--site-ink-2); font-size: 14px; font-weight: 600; line-height: 1.35; }