/* ─────────────────────────────────────────────
   ZESTAWY NA LISTINGU – plakietka i wyróżnienie kafelka

   Założenie: kafelek zestawu ma trzymać ten sam rytm co sąsiednie produkty
   (ta sama szerokość, ta sama krawędź zdjęcia). Wyróżnienie robimy wewnątrz
   zdjęcia, a nie ramką wokół całego <li> – ramka wokół całości rozjeżdżała
   się z sąsiadami, bo kafelek zestawu jest niższy (nie ma swatchy i rozmiarów).
───────────────────────────────────────────── */

.products li.product.brubeck-is-bundle {
  position: relative;
}

/* Prawy górny róg – lewy jest zajęty przez plakietki Salienta
   („Nowość!", „Promocja"). Lekko wychodzi ponad kafelek. */
.brubeck-bundle-badge {
  position: absolute;
  top: -10px;
  right: 10px;
  z-index: 20;
  display: inline-block;
  padding: 6px 11px;
  background: #FF7E20;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(255, 126, 32, 0.35);
  pointer-events: none;
}

/* Akcent na samym zdjęciu – nie zmienia wymiarów kafelka, więc siatka
   pozostaje równa. `inset` kładzie ramkę po wewnętrznej stronie obrazka. */
.products li.product.brubeck-is-bundle .product-wrap > a:first-child {
  display: block;
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(255, 126, 32, 0.55);
  transition: box-shadow 0.2s ease;
}

.products li.product.brubeck-is-bundle:hover .product-wrap > a:first-child {
  box-shadow: inset 0 0 0 2px rgba(255, 126, 32, 0.9);
}

/* Delikatne tło pod opisem, żeby kafelek czytał się jako jedna całość. */
.products li.product.brubeck-is-bundle .product-meta {
  background: rgba(255, 126, 32, 0.045);
}

/* ── Tytuł i przycisk wyśrodkowane w polu opisu ────────────────────
   Kafelek zestawu nie ma rzędu swatchy ani rozmiarów, więc kończył się
   wyżej niż sąsiedzi i zostawała dziura. Rozciągamy łańcuch kontenerów
   na pełną wysokość <li> (siatka i tak zrównuje wysokości), a treść
   centrujemy w pionie w powstałym miejscu.

   Elementy Salienta obok .product-wrap (.background-color-expand,
   .onsale) są pozycjonowane absolutnie, więc flex ich nie dotyczy. */
.products li.product.brubeck-is-bundle {
  display: flex;
  flex-direction: column;
}

.products li.product.brubeck-is-bundle .product-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Zdjęcie trzyma swój rozmiar – rozciąga się tylko część opisowa. */
.products li.product.brubeck-is-bundle .product-wrap > a:first-child {
  flex: 0 0 auto;
}

.products li.product.brubeck-is-bundle .product-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  gap: 16px;
}

.products li.product.brubeck-is-bundle .price-hover-wrap {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

/* Cenę zestawu ukrywa filtr PHP (hide_price_on_listing); tu domykamy
   wrapper, żeby po pustej cenie nie został odstęp. */
.products li.product.brubeck-is-bundle .price {
  display: none;
}

@media (max-width: 690px) {
  .brubeck-bundle-badge {
    top: -8px;
    right: 6px;
    padding: 5px 9px;
    font-size: 10px;
  }
}