/* ===== Carnes Oliva — Productos destacados ===== */

/* Estrella en la tarjeta de producto (arriba a la derecha; el logo de marca va a la izquierda).
   Los !important son necesarios porque las reglas de color por marca de style.css pintan
   el fondo de todos los descendientes de la tarjeta (li.product.brand-xxx *). */
ul.products li.product .carnes-destacado-badge,
.woocommerce-page ul.products li.product.material .carnes-destacado-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 104;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  border-radius: 5px;
  background: #e6bb39 !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: none;
}
ul.products li.product .carnes-destacado-badge span,
.woocommerce-page ul.products li.product.material .carnes-destacado-badge span {
  background: transparent !important;
  color: #fff !important;
}
ul.products li.product .carnes-destacado-badge span[aria-hidden] {
  font-size: 14px;
}

@media (max-width: 690px) {
  ul.products li.product .carnes-destacado-texto {
    display: none;
  }
  ul.products li.product .carnes-destacado-badge {
    padding: 6px;
  }
}

/* ---- Bloque WPBakery "Productos destacados" ----
   Rejilla propia: el sistema de columnas de Salient depende de body.woocommerce y de los
   ajustes globales de tienda, así que en páginas normales (p. ej. /oliva/) se descuadra.
   Aquí el nº de columnas lo marca el bloque con variables CSS (escritorio / tablet / móvil). */
.carnes-destacados-bloque {
  --carnes-cols: 4;
  --carnes-cols-t: 2;
  --carnes-cols-m: 1;
  --carnes-gap: 24px;
}
body .carnes-destacados-bloque.carnes-destacados-bloque ul.products {
  display: grid !important;
  grid-template-columns: repeat(var(--carnes-cols), minmax(0, 1fr));
  gap: var(--carnes-gap);
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .carnes-destacados-bloque.carnes-destacados-bloque ul.products::before,
body .carnes-destacados-bloque.carnes-destacados-bloque ul.products::after {
  content: none !important;
  display: none !important;
}
body .carnes-destacados-bloque.carnes-destacados-bloque ul.products li.product.product:nth-child(n) {
  position: relative;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}
@media only screen and (max-width: 999px) {
  body .carnes-destacados-bloque.carnes-destacados-bloque ul.products {
    grid-template-columns: repeat(var(--carnes-cols-t), minmax(0, 1fr));
  }
}
@media only screen and (max-width: 690px) {
  body .carnes-destacados-bloque.carnes-destacados-bloque ul.products {
    grid-template-columns: repeat(var(--carnes-cols-m), minmax(0, 1fr));
    --carnes-gap: 16px;
  }
}

/* En páginas normales (no WooCommerce) el body no lleva .woocommerce-page, así que repetimos
   aquí los colores por marca de style.css para que las tarjetas se vean igual que en el catálogo. */
.carnes-destacados-bloque ul.products li.product.brand-oliva,
.carnes-destacados-bloque ul.products li.product.brand-oliva * {
  background-color: var(--pink-light);
  color: var(--dark);
}
.carnes-destacados-bloque ul.products li.product.brand-mimar,
.carnes-destacados-bloque ul.products li.product.brand-mimar * {
  background-color: var(--yellow-light);
  color: var(--orange-dark);
}
.carnes-destacados-bloque ul.products li.product.brand-marbeira,
.carnes-destacados-bloque ul.products li.product.brand-marbeira * {
  background-color: var(--green-light);
  color: var(--green);
}
.carnes-destacados-bloque ul.products li.product.brand-marca-blanca,
.carnes-destacados-bloque ul.products li.product.brand-marca-blanca * {
  background-color: #e4e4cc;
  color: var(--purple);
}

.carnes-destacados-bloque ul.products li.product.brand-oliva h2 {
  color: var(--dark);
}
.carnes-destacados-bloque ul.products li.product.brand-mimar h2 {
  color: var(--orange-dark);
}
.carnes-destacados-bloque ul.products li.product.brand-marbeira h2 {
  color: var(--green);
}
.carnes-destacados-bloque ul.products li.product.brand-marca-blanca h2 {
  color: var(--purple);
}
.carnes-destacados-bloque ul.products li.product .carnes-marca-logo-grid {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 103;
  max-height: 45px;
  width: auto;
  height: auto;
  background: rgba(255, 255, 255, 0.9) !important;
  object-fit: contain;
  border-radius: 2px;
}

.carnes-destacados-boton-wrap {
  display: flex;
  justify-content: center;
  margin: 30px 0 0;
}
.carnes-destacados-boton {
  display: inline-block;
  padding: 14px 32px;
  background: var(--accent, #8a2d2d);
  color: #fff !important;
  border-radius: 4px;
  font-weight: 400;
  text-decoration: none;
  transition: opacity 0.18s;
  text-transform: uppercase;
  font-size: 14px;
}
.carnes-destacados-boton:hover {
  opacity: 0.85;
}

.carnes-destacados-vacio {
  padding: 20px;
  border: 1px dashed #ccc;
  color: #777;
  text-align: center;
}