/* ============================================================
   Nuevo diseño de la tarjeta de producto y de beneficio.
   Se carga después de style.css (fragments/resources.html) para ganar por orden de fuente.
   Todo va scoped bajo .card-box: nunca una regla .quick-view desnuda, views/perfil.html
   usa esa clase en el botón de subir avatar.
   ============================================================ */

/* El padding inferior reserva el carril que ocupa .ver-mas al hacer hover; va en la tarjeta y no
   en .card-price, que no se renderiza sin precio anterior ni para el visitante anónimo. */
.card-box {
    position: relative;
    padding-bottom: 50px;
    background: white;
    border: 1px solid #c8c8c85e;
    border-radius: 22px;
    -webkit-transition: -webkit-transform .25s;
    transition: transform .25s;
}

.card-box:hover {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

/* Una sola declaración con el mismo valor en toda la tarjeta: declararlo también en la barra
   "Ver más" haría parpadear el cursor al cruzar. Se repite en `a` porque el user-agent fija
   cursor:pointer en los enlaces y rompe la herencia. */
.card-box,
.card-box a {
    cursor: url(../img/Cursor.png) 16 16, pointer;
}

/* Ancestro de las insignias .oferta / .nuevo / .otro; sin overflow:hidden, las recortaría */
.card-box .product-thumb {
    position: relative;
}

/* Chip de la maqueta (valores de .nuevo) en vez del círculo de 65px de style.css */
.card-box .product-thumb > .oferta {
    top: 10px;
    right: 10px;
    width: auto;
    height: auto;
    padding: 5px 10px;
    border-radius: 4px 12px 4px 4px;
    font-size: 12px;
    background-color: #d20a11;
}

/* Hijo directo: el <img> del ícono de envío express vive dentro de span.delivery */
.card-box .product-thumb > a > img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 22px;
}

/* Clase nueva: no reutiliza .product-name para no heredar su nowrap + ellipsis.
   Caja de alto fijo de 2 líneas: un título de 1 línea y uno de 2 ocupan lo mismo, así las
   millas quedan a la misma altura en toda la fila. Lo que pase de 2 líneas se corta con "…". */
.card-box .product-title {
    font-size: 14px;
    margin: 0 0 5px;
    padding: 15px 15px 0 15px;
    line-height: 1.4;
    min-height: calc(2.8em + 15px); /* 2 líneas + el padding, que border-box mete dentro */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-box .product-title a {
    color: #222222;
}

/* Casi pegado: las millas y el precio anterior se leen como un par, no como dos bloques */
.card-box h4 {
    padding: 0 15px 2px;
    margin: 0;
}

.card-box .card-price {
    padding: 0 15px;
}

/* Se declara todo aquí para no depender de .card-box p (style.css), regla de una descripción que ya
   no existe en la tarjeta: de ahí venían la caja fija de 65px, los 15px de padding y el tamaño.
   line-height propio porque body lo fija en 24px absolutos. */
.card-box .card-price .price-normal {
    height: auto;
    padding: 0;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.2;
}

/* Oculta por defecto, se desliza desde el borde inferior al hacer hover sobre la tarjeta */
.card-box .ver-mas {
    position: absolute;
    right: 0;
    bottom: -14px;
    width: 100%;
    opacity: 0;
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    pointer-events: none;
    -webkit-transition: bottom 0.45s cubic-bezier(.25, .8, .25, 1), opacity 0.45s cubic-bezier(.25, .8, .25, 1), -webkit-transform 0.45s cubic-bezier(.25, .8, .25, 1);
    transition: bottom 0.45s cubic-bezier(.25, .8, .25, 1), opacity 0.45s cubic-bezier(.25, .8, .25, 1), transform 0.45s cubic-bezier(.25, .8, .25, 1);
}

.card-box:hover .ver-mas {
    bottom: -10px;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    pointer-events: auto;
}

/* Sin opacity/transform: el reveal del ancla lo hace la regla base .product-item:hover .quick-view */
.card-box .ver-mas .quick-view {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 5px 15px;
    line-height: 40px;
    margin-bottom: 10px;
    text-align: center;
    background-color: #000;
    color: #fff;
    border-radius: 0 0 22px 22px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: background-color 0.25s ease, color 0.25s ease;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* El #111 que hereda de la base es indistinguible del #000 de reposo */
.card-box .ver-mas .quick-view:hover {
    background-color: #333;
    color: #fff;
}

/* ------------------------------------------------------------
   Grilla del catálogo (views/categorias.html: .row.shop-grid).
   Bootstrap 3 maqueta las columnas con float: una tarjeta más alta que las demás "engancha"
   a la siguiente y la empuja a la derecha, dejando el hueco en blanco de la columna 1.
   Con flex-wrap cada fila arranca siempre en el borde izquierdo, así que el hueco no puede
   producirse por más largo que sea el texto. Va scoped a .shop-grid: los otros listados que
   reusan .product-item viven dentro de un owl-carousel y no deben volverse flex.
   ------------------------------------------------------------ */
.shop-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

/* La tarjeta cuelga de 4 wrappers (.item > .item-product > .item-product-thumb); la cadena
   completa se hace flex para que .card-box herede el alto de la fila y todos los bordes
   inferiores queden alineados. */
.shop-grid > .product-item,
.shop-grid > .product-item > .item,
.shop-grid > .product-item > .item > .item-product,
.shop-grid > .product-item > .item > .item-product > .item-product-thumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.shop-grid .card-box {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}