/* ========================================================================
   Module: Product Availability (global OOS behavior)
   - Tryb 'dim': wyszarzenie, baner "Produkt niedostępny", blokada CTA
   - Działa na pętlach Woo (.products li.product) i na pojedynczym PDP
   ======================================================================== */

:root{
  --tuto-oos-ink:#111827;      /* kolor banera */
  --tuto-oos-bg:#111827;
  --tuto-oos-fg:#fff;
  --tuto-oos-shadow: 0 6px 16px rgba(0,0,0,.15);
  --tuto-oos-opacity:.72;
}

/* ================== LISTING / ARCHIWA (Woo loop) ======================= */
.products li.product.is-out,
.products li.product.outofstock{
  position: relative;
  filter: grayscale(0.9) saturate(0.85);
  opacity: var(--tuto-oos-opacity);
}

/* Pasek/baner z napisem */
.products li.product.is-out::after,
.products li.product.outofstock::after{
  content: "Produkt niedostępny";
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tuto-oos-bg);
  color: var(--tuto-oos-fg);
  padding: 6px 10px;
  border-radius: 8px;
  font: 700 12px/1 Inter, system-ui, Segoe UI, Roboto, sans-serif;
  box-shadow: var(--tuto-oos-shadow);
  letter-spacing: .2px;
  z-index: 6;
  pointer-events: none;
}

/* Blokada CTA: standard Woo + Twój pasek akcji (ostrożnie – bez !important) */
.products li.product.is-out .button.add_to_cart_button,
.products li.product.outofstock .button.add_to_cart_button,
.products li.product.is-out .add_to_cart_button,
.products li.product.outofstock .add_to_cart_button,
.products li.product.is-out .tuto-actions .tuto-iconbtn--cart,
.products li.product.outofstock .tuto-actions .tuto-iconbtn--cart{
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ================== DROPDOWN SEARCH – jeżeli dodasz klasę .is-out ====== */
.tuto-search-card.is-out{
  position: relative;
  filter: grayscale(0.9) saturate(0.85);
  opacity: var(--tuto-oos-opacity);
}
.tuto-search-card.is-out::after{
  content: "Produkt niedostępny";
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tuto-oos-bg);
  color: var(--tuto-oos-fg);
  padding: 4px 8px;
  border-radius: 7px;
  font: 700 11px/1 Inter, system-ui, Segoe UI, Roboto, sans-serif;
  box-shadow: var(--tuto-oos-shadow);
  z-index: 5;
  pointer-events: none;
}
.tuto-search-card.is-out .tuto-search__btn.add-cart{
  opacity:.5; pointer-events:none; cursor:not-allowed;
}

/* ================== SINGLE PRODUCT (PDP) – kosmetyka =================== */
.single-product .product.outofstock .stock.out-of-stock{
  /* podbij komunikat dostępności */
  font-weight: 700;
  color: var(--tuto-oos-ink);
}

.single-product .product.outofstock .images,
.single-product .product.outofstock .woocommerce-product-gallery{
  position: relative;
}
.single-product .product.outofstock .woocommerce-product-gallery::after{
  content: "Produkt niedostępny";
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tuto-oos-bg);
  color: var(--tuto-oos-fg);
  padding: 6px 10px;
  border-radius: 8px;
  font: 700 12px/1 Inter, system-ui, Segoe UI, Roboto, sans-serif;
  box-shadow: var(--tuto-oos-shadow);
  z-index: 6;
  pointer-events: none;
}

/* Redukcja ruchu */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}