/* Scientech Blocks — assembled by plugin/build.py from redesign/*.css.
   Do not edit this file directly; edit the source and rebuild. */

/* ===========================================================================
   Out-of-stock treatment — product cards everywhere, and the product page.

   Loaded site-wide, because product cards appear on the homepage rails, the
   shop, category archives, search, related products and inside our own hero
   and showcase widgets. All of those render WooCommerce's own card markup, so
   one stylesheet covers the lot.

   NO PHP AND NO TEMPLATE OVERRIDE IS NEEDED. WooCommerce already stamps the
   stock state onto the markup:

     - cards:        <li class="product ... outofstock">
     - product page: <div class="woo-single-post-class ... outofstock">

   Verified on the live site before writing: the homepage carries 16 cards,
   every one of them with .woocommerce_loop_product_link and .product-thumbnail,
   and the out-of-stock product renders with the same structure there as on a
   category archive.

   Stock status itself is set per product in the WooCommerce admin, under
   Product data > Inventory > Stock status. It is not a currency setting and
   has nothing to do with X-Currency.

   One caveat worth knowing: the badge text lives in `content:`, so it is not
   translatable and cannot be edited from wp-admin. That is a deliberate
   trade for not owning a template — say the word and it becomes a small PHP
   render instead.
   ========================================================================== */

/* --- 1. cards ---------------------------------------------------------------
   The badge is placed on .woocommerce_loop_product_link, which is the exact
   element that hosts the theme's own "Sale!" badge, so it lands in the same
   slot with the same 15px inset by construction rather than by matching
   numbers by hand. Measured live: badge x=618 against a host left edge of
   603.

   A card that is both on sale and out of stock would stack the two in one
   corner, so the sale flash is suppressed — an item you cannot buy has no
   useful discount to advertise. */
/* MUST stay scoped with `.product-thumbnail >`. A card carries TWO elements
   with this class: one wrapping the image, and a second wrapping the title in
   .product-info. Unscoped, the badge rendered on both and a duplicate sat over
   the product name. */
li.product.outofstock .product-thumbnail > .woocommerce_loop_product_link {
  position: relative;
}

li.product.outofstock .product-thumbnail > .woocommerce_loop_product_link::after {
  content: "Out of stock";
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 3;
  display: grid;
  place-items: center;
  height: 32px;
  padding: 0 0.875rem;
  border-radius: 9999px;
  background: rgba(22, 35, 61, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  /* The whole card is a link; the badge must not swallow the click. */
  pointer-events: none;
}

li.product.outofstock .onsale {
  display: none;
}

/* Knocked back so the badge is not the only signal — an unavailable product
   should read as unavailable at a glance, from across the grid. */
li.product.outofstock .product-thumbnail img {
  opacity: 0.5;
  filter: grayscale(0.5);
}

/* --- 2. the product page ----------------------------------------------------
   Same idea at the larger scale. The badge mirrors the wishlist heart in the
   opposite corner: both are 40px tall at a 12px inset, so they read as a pair
   rather than as two unrelated overlays.

   .nickx-slider-for is the gallery stage and is already position:relative (it
   is the containing block for .pdp__stage-actions, the heart), so the badge
   needs no new positioning context. */
.woo-single-post-class.outofstock .pdp .nickx-slider-for::after {
  content: "Out of stock";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  height: 40px;
  padding: 0 1rem;
  border-radius: 9999px;
  background: rgba(22, 35, 61, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* Only the photography is faded — the badge and the wishlist heart sit above
   it and stay at full strength, which is the point of fading in the first
   place. */
.woo-single-post-class.outofstock .pdp .nickx-slider-for .nswiper-slide img,
.woo-single-post-class.outofstock .pdp .thumbnail-slider .nickx-thumbnail img {
  opacity: 0.45;
  filter: grayscale(0.55);
}

/* The theme's own "Out of stock" line in the summary column is small grey text
   directly above the brand eyebrow, which is what made this easy to miss. It
   is kept — it is the accessible, text-only statement of the same fact, and
   the badge above is decorative content that a screen reader never sees — but
   given weight so it reads as a status rather than a caption. */
.woo-single-post-class.outofstock .pdp .summary .stock.out-of-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: #b42318;
  /* pdp-live.css zeroes margin-bottom on every summary child, so the status
     line sat flush against the brand eyebrow below it — measured 0px. This
     restores one step of the column's own rhythm (the upper blocks step 12px).
     !important is needed only to outrank that blanket reset. */
  margin-bottom: 0.75rem !important;
}

.woo-single-post-class.outofstock .pdp .summary .stock.out-of-stock::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: currentColor;
}