/* === BLACK WEEK badge dla produktów z przekreśloną ceną (del.price.--max) – CSS only === */

/* 1) Kafelek i wrapper zdjęcia muszą mieć kontekst pozycjonowania */
:where(.product, .product-box, .product-tile, .product-item, .product__box, .js-product, .listing__item) {
  position: relative;
}
:where(.product-photo, .product__image, .product-image, figure, .photo, .thumb) {
  position: relative;
}

/* 2) BADGE przypięty do całego kafelka (pokazuje się, gdy wewnątrz jest del.price.--max) */
:where(.product, .product-box, .product-tile, .product-item, .product__box, .js-product, .listing__item)
:has(del.price.--max)::before {
  content: "BLACK WEEK";
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff2a2a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 50;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}

/* 3) (Opcjonalnie) zamiast do kafelka – przypnij badge do wrappera zdjęcia */
:where(.product, .product-box, .product-tile, .product-item, .product__box, .js-product, .listing__item)
:has(del.price.--max)
:where(.product-photo, .product__image, .product-image, figure, .photo, .thumb)::before {
  content: "BLACK WEEK";
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff2a2a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 50;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}

/* 4) Upewnij się, że obrazek nie przykrywa badge */
:where(.product-photo img, .product__image img, .product-image img, figure img, .photo img, .thumb img) {
  position: relative;
  z-index: 1;
}

/* 5) Drobne zmniejszenie na mobile (opcjonalnie) */
@media (max-width:600px){
  :where(.product, .product-box, .product-tile, .product-item, .product__box, .js-product, .listing__item)
  :has(del.price.--max)::before,
  :where(.product, .product-box, .product-tile, .product-item, .product__box, .js-product, .listing__item)
  :has(del.price.--max)
  :where(.product-photo, .product__image, .product-image, figure, .photo, .thumb)::before {
    font-size: 11px;
    padding: 3px 7px;
  }
}