/* Ajustes propios de SUGART sobre el template (main.css). */

/* ---- Card de producto: panel de hover (Ver Mas / Categoria / Familia) ----
   El template lo posiciona con un bottom fijo (-125px / -130px), asi que si el
   titulo ocupa 2 lineas o el panel cambia de alto queda un hueco entre la card
   y el panel. Lo anclamos al borde inferior de la card con top: 100%. */
.tpproduct__hover-text,
.tpproduct:hover .tpproduct__hover-text,
.tpprogress__hover .tpproduct__hover-text,
.tpprogress__hover:hover .tpproduct__hover-text {
    top: 100%;
    bottom: auto;
}

.tpproduct__hover-text {
    transform: translateY(6px);
}

.tpproduct:hover .tpproduct__hover-text {
    transform: translateY(0);
    z-index: 11;
}

/* Card y panel se ven como un solo bloque: sin esquinas redondeadas abajo. */
.tpproduct {
    transition: border-radius .2s ease-out;
}

.tpproduct:hover {
    border-radius: 10px 10px 0 0;
    z-index: 11;
}

.tpproduct:hover .tpproduct__content {
    border-radius: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tpproduct:hover .tpproduct__hover-text {
        bottom: auto;
    }
}