/* PA catalog styles — added 2026-05-20 (Batch 2 / T3.b + T3.c).
   Loaded on any page that renders product miniatures: homepage, category,
   search, manufacturer, brand. Tokens mirror pa-home-v1.css :root vars
   where appropriate; values inlined when this file might load standalone
   (e.g. category page without pa-home-v1.css). */

/* Out-of-stock flag — top-left red pill on the card image. The flag
   <li> is emitted by either core (PS_SHOW_LABEL_OOS_LISTING_PAGES=1)
   or by the overlay product-flags.tpl fallback. Hummingbird stock
   styling renders all .badge identically; we override only out_of_stock. */
.product-miniature .product-flags .badge.out_of_stock,
.product-flags .badge.out_of_stock {
  background: #c0392b;
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .6875rem;
  padding: .35rem .55rem;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

/* OOS card treatment — apply to the whole miniature.
   Image desaturated + 50% opacity; price kept full-strength so the
   user still sees the value, but the cart affordance is clearly gone.
   `pointer-events: none` on image link prevents accidental navigation
   from a low-intent OOS click; the title link is preserved so the
   visitor can click through to read the PDP + sign up for the alert. */
.product-miniature.is-oos .product-miniature__top {
  position: relative;
}
.product-miniature.is-oos .product-miniature__top img,
.product-miniature.is-oos .product-miniature__top picture {
  opacity: .5;
  filter: grayscale(35%);
  transition: opacity .15s ease;
}
.product-miniature.is-oos:hover .product-miniature__top img,
.product-miniature.is-oos:hover .product-miniature__top picture {
  opacity: .65;
}
.product-miniature.is-oos .product-miniature__price,
.product-miniature.is-oos .product-miniature__regular-price {
  color: #5a6678;
}

/* Quickview button — disable on OOS cards. Hovering quickview on
   an OOS card just opens the same buy box with no functional action. */
.product-miniature.is-oos .product-miniature__quickview,
.product-miniature.is-oos .js-quickview {
  display: none;
}

/* "Email me when back" CTA — replaces the cart button on OOS cards.
   Sized to match .product-miniature__add (square-icon) at the breakpoint
   of the surrounding Hummingbird .product-miniature__actions row. */
.product-miniature__notify.pa-notify-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .55rem .75rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  color: #14181d;
  background: #fff;
  border: 1px solid #c7c4bd;
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.product-miniature__notify.pa-notify-back:hover,
.product-miniature__notify.pa-notify-back:focus-visible {
  background: #f3f2ee;
  border-color: #5a6678;
  color: #0f1721;
  text-decoration: none;
}
.product-miniature__notify.pa-notify-back .material-icons {
  font-size: 1.05rem;
  line-height: 1;
}

/* Mobile compaction — keep the CTA on one line, shrink the icon. */
@media (max-width: 575.98px) {
  .product-miniature__notify.pa-notify-back {
    font-size: .8125rem;
    padding: .5rem .6rem;
  }
  .product-miniature__notify.pa-notify-back .material-icons {
    font-size: 1rem;
  }
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .product-miniature.is-oos .product-miniature__top img,
  .product-miniature.is-oos .product-miniature__top picture,
  .product-miniature__notify.pa-notify-back {
    transition: none;
  }
}