/*
* `Frontend/ProductCardBadges.php` -- se inyecta sobre DOS sistemas de card
* distintos (ver el docblock de esa clase): el loop nativo de WooCommerce/
* Blocksy y el widget "Woo Products" de Premium Addons for Elementor (Skin
* 1). Ninguno de los dos tiene wrapper propio que estilizar acá: son spans
* sueltos enganchados en hooks de cada card nativa. Mismas custom
* properties de tema que single-product.css/store.css, mismos valores de
* respaldo si el tema no las define.
*
* `order` de flex (abajo) es específico del caso Blocksy -- confirmado en
* vivo (HTML real, 2026-08-04) que el precio de WooCommerce/Blocksy no
* siempre termina en el mismo punto del DOM que sugiere leer el código del
* tema -- en este sitio cae al final de la ``, después de estos spans,
* aunque el hook nativo donde se cuelga (`woocommerce_after_shop_loop_item_title`,
* prioridad 10) debería disparar antes que el nuestro (prioridad 15). En vez
* de perseguir esa discrepancia, se aprovecha que Blocksy ya define
* `[data-products] .product{display:flex;flex-direction:column}` -- cada
* `` es un contenedor flex, así que `order` reordena
* visualmente sin importar en qué punto del DOM cae cada pieza. `figure`
* (imagen) no necesita `order` explícito: por default es `0`, siempre va
* primero. En la card de Premium Addons esto es un no-op inofensivo (su
* `.premium-woo-products-details-wrap` no es flex, `order` no hace nada ahí)
* -- ese caso no lo necesita: el orden en el DOM ya sale correcto porque los
* hooks (`pa_woo_product_before_title`/`pa_woo_product_after_price`) están
* a la vista en el template fuente, no armados dinámicamente.
*/
/*
* Revertido 2026-09-08: `align-items: start` (agregado 2026-08-04 para
* evitar un hueco feo entre precio y ubicación en cards cortas) tenía el
* efecto colateral de que cada card termina a una altura distinta según su
* propio contenido -- el precio quedaba a distinta altura entre cards de
* la misma fila. Se deja el estiramiento
* default del grid (cada `.product` a la altura de la fila más alta) y en
* vez de evitar el hueco, se lo controla a propósito con `margin-top: auto`
* en `.oxea-card-bottom-row` -- el hueco sobrante ahora cae siempre justo
* arriba del precio, no en un punto impredecible.
*/
/*
* Borde y sombra suaves para separar la card del fondo (tienda, categorías,
* tienda del vendedor y carruseles: todos pintan `.product` dentro de
* `[data-products]`, salvo Premium Addons, que usa su propio wrapper). Solo
* contorno -- no toca padding, orden ni contenido de la card. `overflow:
* hidden` para que la imagen respete las esquinas redondeadas.
*/
[data-products] .product,
.premium-woo-product-wrapper {
border: 1px solid #e6e8e7;
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.07 );
overflow: hidden;
}
/*
* Título recortado a 1 línea (rediseño 2026-08-24) -- mismo selector nativo
* `.woocommerce-loop-product__title` en los dos sistemas de card (Blocksy lo
* usa directo, Premium Addons lo hereda de `woocommerce_template_loop_product_title()`,
* ver docblock de la clase), así que una sola regla alcanza para ambos.
*/
.woocommerce-loop-product__title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-products] .product > .woocommerce-loop-product__title {
order: 1;
}
/*
* Línea de datos del producto, debajo del título -- reemplaza a la vieja
* `.oxea-card-meta` ("Condición · Año" arriba del título). Ahora junta TODOS
* los valores de atributos del producto (ver `ProductCardBadges::echo_data_line()`),
* recortada a 2 líneas por CSS (`-webkit-line-clamp`), no por PHP.
*/
.oxea-card-data-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 0.85em;
line-height: 1.35;
color: #888;
margin: 2px 0;
order: 2;
min-height: 2.7em; /* 2 líneas a line-height:1.35 -- reserva el espacio aunque el producto solo tenga 1 línea de atributos */
box-sizing: border-box;
padding: 0 14px;
}
/*
* Precio nativo oculto, no eliminado del DOM -- lo reemplaza
* `.oxea-card-price` (ver ProductCardBadges::echo_price()), que sí conoce
* `_oxea_currency`. Selector explícito por sistema de card: `.price` sería
* demasiado genérico (WooCommerce lo reusa en otros contextos, ej. dentro
* de `.cross-sells`) para un `display:none` global.
*/
[data-products] .product > .price,
.premium-woo-products-details-wrap > .price {
display: none;
}
/*
* Fila del precio -- va AL FINAL de la card (corregido
* 2026-08-24 con captura real: antes iba primero, después de la línea de
* datos). Mismo `order` que `.oxea-card-financing-group`/`.oxea-card-location`
* a propósito -- los 3 quedan empatados, así que el sistema Blocksy (el
* único de los dos que realmente lee `order`, ver docblock del archivo)
* los ordena por posición en el DOM, que ya es la correcta porque
* `echo_price_financing_and_location()` los imprime en ese orden.
*/
.oxea-card-bottom-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
order: 3;
margin-top: auto; /* ancla el precio al fondo de la card, parejo en toda la fila */
}
.oxea-card-price {
margin: 2px 0;
min-width: 0;
}
.oxea-card-price__row {
display: flex;
align-items: center;
gap: 6px;
}
.oxea-card-price__old {
font-size: 0.85em;
color: #999;
text-decoration: line-through;
}
.oxea-card-price__off {
font-size: 0.8em;
font-weight: 700;
color: var( --oxea-color-success, #1e7e34 );
}
.oxea-card-price__new {
display: block;
font-size: 1.15em;
font-weight: 700;
color: #222;
text-decoration: none;
}
/*
* "Destacado" (2026-09-03, eje de plan "productos destacados") -- viene del
* flag de destacado por nodo (`FeaturedProducts::is_featured()`), no de un
* atributo del catálogo, y siempre dice lo mismo.
*/
.oxea-card-featured-badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
padding: 3px 10px;
border-radius: 999px;
background: var( --oxea-color-secondary, #f5a623 );
color: #fff;
font-size: 0.72em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
}
/*
* Card destacada: fondo muy claro y sombra algo más marcada. Se engancha al
* mismo badge "Destacado" de arriba, así que usa el estado que ya existe por
* nodo (`FeaturedProducts::is_featured()`) sin duplicar la consulta ni tocar
* el HTML. `:has()` alcanza a los dos sistemas de card (ver docblock del
* archivo); en un navegador sin `:has()` la card destacada se ve como una
* normal, con el badge, que es el comportamiento anterior. El fondo sólido va
* primero por si no hay `color-mix`.
*/
[data-products] .product:has( .oxea-card-featured-badge ),
.premium-woo-product-wrapper:has( .oxea-card-featured-badge ) {
border-color: #d7e7d4;
border-color: color-mix( in srgb, var( --oxea-color-primary, #2e7d32 ) 28%, #fff );
background: #f7fbf6;
background: color-mix( in srgb, var( --oxea-color-primary, #2e7d32 ) 5%, #fff );
box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.14 );
}
/*
* Wrapper de todas las líneas de financiación (2026-08-04, pedido para
* poder manipular el segmento entero) -- el `order` de flex va acá, no en
* cada `.oxea-card-financing` individual: son las que quedan como hijas
* directas de `.product` ahora. `order: 3` -- mismo valor que
* `.oxea-card-location`/`.oxea-card-bottom-row`, ver la nota en esta última.
*
* Recortado a 2 líneas máximo (2026-08-24, pedido explícito): mismo recurso
* que `.oxea-card-data-line` (`-webkit-line-clamp`), no en PHP -- una card
* con muchas líneas de financiación ("35% de entrega... · Hasta 18 cuotas...
* · Financiación de fábrica... · Consultar") se comía demasiado espacio.
*/
.oxea-card-financing-group {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.3;
order: 3;
}
.oxea-card-financing {
display: inline;
font-size: 0.8em;
color: var( --oxea-color-success, #1e7e34 );
}
.oxea-card-financing:not(:last-child)::after {
content: " • ";
}
.oxea-card-location {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.8em;
color: #888;
margin-top: 4px;
order: 3;
}
.oxea-card-location svg {
width: 1em;
height: 1em;
fill: currentColor;
flex-shrink: 0;
}
/*
* Cards de igual alto en el carrusel de Premium Addons (2026-08-04, pedido
* con captura -- alturas dispares porque cada card tiene distinta cantidad
* de líneas de financiación). Slick (la librería del carrusel) normalmente
* iguala la altura de los slides por JS calculando el más alto, pero en
* vivo no lo estaba haciendo de forma confiable (¿adaptiveHeight activado
* en el widget? ¿timing de imágenes? no verificable sin verlo corriendo) --
* en vez de perseguir la causa exacta en el JS de un plugin de terceros, se
* fuerza con flexbox en CSS puro, que no depende de qué esté haciendo Slick:
* `.slick-track` pasa a ser un contenedor flex (en vez del `float` que usa
* Slick por default) y cada nivel de wrapper hasta la card visible
* (`.premium-woo-product-wrapper`) hereda `height:100%`/`flex:1` para que
* el alto de fila se propague hasta abajo.
*/
.premium-woo-products-carousel .slick-track {
display: flex !important;
align-items: stretch;
}
.premium-woo-products-carousel .slick-slide {
height: auto;
display: flex !important;
}
.premium-woo-products-carousel .slick-slide > div {
display: flex;
flex: 1 1 auto;
width: 100%;
}
.premium-woo-products-carousel .slick-slide > div > li.product {
display: flex;
flex: 1 1 auto;
width: 100%;
}
.premium-woo-products-carousel .premium-woo-product-wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}