html,
body{
    margin:0;
    min-height:100%;
}

body{
    font-family: 'Arial', sans-serif;
    background-color: var(--background-color);
}

.contenedor{
    min-height:100vh;
}
/* ============================================================
   SI NO HAY RESULTADOS DE BUSQUEDA
   ============================================================ */
/**/
.contenedor .sin-resultados {
    font-family: var(--font-primary);
    font-weight: 300;
    color: var(--txt);
    text-align: center;
    margin-top: 2em;
}

main{
   /*padding-top:auto !important;
   */
  align-items: center;
  justify-content: center;
  padding: 0.5em 0em;
  display: block;

}
/* ============================================================
   FILTROS
   ============================================================ */
.contenedor .filtros .input-field label {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--txt);
}

.contenedor .filtros .input-field .select-wrapper .select-dropdown  {
  font-family: var(--font-primary);
  
}
.contenedor .filtros .input-field .select-wrapper  .dropdown-content  {
  background-color: var(--card-bg-color) !important;
}
.contenedor .filtros .input-field .select-wrapper  .dropdown-content li span{
  font-family: var(--font-primary);
  color: var(--txt) !important;
}
/* ============================================================
   LAYOUT
   ============================================================ */
.productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
    gap: 1em;
    justify-items: center;
    align-items: start;
    width: 100%;
    padding: 5px;
}


/* ============================================================
   TARJETA
   ============================================================ */

.productos .card {
    width: 100%;
    max-width: var(--card-width);
    background-color: var(--card-bg-color);
    border: 2px solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    transition: transform var(--card-transition-duration) var(--card-transition-ease);
    box-shadow: 0 3px 10px var(--card-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    
}

.productos .card:hover {
    transform: scale(var(--card-hover-scale));
}


/* ============================================================
   IMAGEN
   ============================================================ */

.card .card-image {
    width: 100%;
    aspect-ratio: var(--card-image-aspect-ratio);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--card-border-color);
   
    
}

/* Carousel contenedor */
.card .card-image .carousel {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    
}

/* Cada item */
.card .card-image .carousel .carousel-item {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    

}

/* Imagen */
.card .card-image .carousel .carousel-item img {
    width: 100% !important;
    height: 100% !important;
  object-position: center !important;
  object-fit: cover !important;
    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
    display: block;
    border-radius: 1.8em 1.8em 0 0;
    
}



/* ============================================================
   CONTENIDO DE LA TARJETA
   ============================================================ */

.card .card-content {
    display: flex;
    flex-direction: column;
    height: 110px;
    padding: 5px 10px !important;
}

.card-content .nombre {
    color: var(--txt);
    font-family: var(--font-title);
    font-weight: 700;
    margin-bottom: 0.5em;
}

.card .card-content .precio {
    margin-top: auto;
}

.card .card-content .precio .precio-valor {
    color: var(--price-color);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.2rem;
}



/* ============================================================
   BOTÓN
   ============================================================ */

.card .card-action {
    border: none !important;              /* quita la línea */
    margin: 0 !important;
    padding: 0 !important;
    height: 35px !important;              /* un poco más cómodo */
    background-color: var(--btn-bg);
    overflow: hidden;    
    display: flex;
    align-items: center;
    justify-content: center; 
 
}


.card .card-action:hover {
    background-color: var(--btn-bg-hover);
}

.card .card-action a {
    font-size: 15px !important;
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--btn-txt) !important;
    text-decoration: none;

}

/* Reset de márgenes y bordes internos */



/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1024px) {
    .productos {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.8em;
    }
    .productos .card{
        height: 380px !important;
    }
    .card .card-image {
        aspect-ratio: 3/5;
    }
}

@media(max-width:700px) {
    .productos {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.7em;
    }
    .productos .card{
        height: 350px !important;
        }
    
    .card .card-image {
        aspect-ratio: 3/5;
    }
}

@media(max-width:400px) {
    .productos {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5em;
    }
    .productos .card{
    height: 300px !important;
    }

    
}

@media(max-width:300px) {
    .productos {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.5em;
    }

    
}