/*
  Complemento del CSS de Webflow. Solo cubre lo que el export no traía porque
  su catálogo era estático: fotos reales dentro de las tarjetas, la barra de
  orden, la paginación y el estado vacío. No redefine nada del diseño.
*/

.card-header.con-foto,
.div-cover-detail.con-foto {
  background-image: none;
}

.card-header .imagen-tarjeta,
.div-cover-detail .image-detail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.barra-orden {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.conteo-resultados {
  color: #5e4e74;
  margin: 0;
  font-size: 14px;
}

.enlaces-orden {
  display: flex;
  gap: 16px;
}

.enlace-orden {
  color: #512381;
  border-bottom: 1px solid #0000;
  padding-bottom: 2px;
  font-size: 14px;
  text-decoration: none;
  transition: border-color .3s, color .3s;
}

.enlace-orden:hover {
  color: #ebb963;
}

.enlace-orden.activo {
  border-bottom-color: #ebb963;
  font-weight: 500;
}

.sin-resultados {
  color: #5e4e74;
  padding: 48px 0;
}

.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

.paginacion .pagina {
  color: #512381;
  border: 1px solid #512381;
  border-radius: 999px;
  min-width: 40px;
  padding: 8px 14px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  transition: background-color .3s, border-color .3s, color .3s;
}

.paginacion a.pagina:hover {
  background-color: #f6ede1;
  border-color: #ebb963;
}

.paginacion .pagina.activa {
  background-color: #512381;
  color: #fff;
}

.paginacion .pagina.inactiva {
  opacity: .35;
}

.paginacion .pagina.puntos {
  border-color: #0000;
}

/* Portada: la foto de cada categoria va en un <img>, no en background-image
   inline, para no depender de interpolar una URL dentro de un atributo
   style. Llena el mismo contenedor que antes cubria el fondo. */
.header-catalogue {
  overflow: hidden;
}

.image-header-catalogue {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Menu lateral: en el template los nombres de categoria traian un <br> a mano,
   asi que la columna medía ~240px. Aqui salen de la base de datos y algunos son
   largos ("Todo en Especias & Plantas"), y como .col-categories es un flex item
   con base auto, crecia hasta empujar la rejilla de productos a la mitad del
   ancho. Se fija el ancho del template y los nombres se acomodan solos. */
.col-categories {
  flex: 0 0 auto;
  width: 240px;
}

@media screen and (max-width: 991px) {
  .col-categories {
    width: 210px;
  }
}

/* Webflow deja los toggles en nowrap; el template lo salvaba con un <br> dentro
   del nombre. Con nombres dinamicos hace falta que envuelvan solos. */
.col-categories .dropdown-toggle,
.nav-categories .dropdown-toggle {
  white-space: normal;
}