/* ========================================================================= * product-grid-tactil-icono.css * ------------------------------------------------------------------------- * Icono circular "Comprar Ahora" para TACTIL en las tarjetas del widget * lumik_product_grid (plugin lumik-agency-widgets). * * QUE HACE: en telefonos (hover:none), el MISMO elemento * a.pgw-add-to-cart (el boton "Comprar Ahora" que ya maneja WooCommerce * y el JS del widget) deja de ser la pildora que solo aparecia en :hover * y pasa a ser un circulo blanco de 40x40, siempre visible, en la esquina * SUPERIOR DERECHA de la foto, con un icono de carrito adentro. * * EN ESCRITORIO (hover:hover) NO SE TOCA NADA: todo este archivo vive * dentro de @media (hover: none), asi que el comportamiento original del * plugin (pildora oculta que aparece en :hover) queda byte a byte igual. * * ------------------------------------------------------------------------- * RONDA 1 DE CORRECCIONES (2026-09-14) - tres escepticos en paralelo * refutaron la version anterior. Lo que se corrige en ESTE archivo: * * BUG 1 (pointer-events): product-grid.css:774 pone * ".pgw-product-image .pgw-add-to-cart.loading { opacity:.7; * pointer-events:none }" SIN !important. Nuestro bloque de .loading * ya ganaba "opacity" pero nunca declaraba "pointer-events", asi que * esa propiedad quedaba sin competencia y el plugin la aplicaba tal * cual: el circulo se veia bien pero NINGUN toque lo alcanzaba durante * todo el estado .loading (100% de 248 mediciones en el esceptico A). * Arreglo: "pointer-events: auto !important" en el bloque de reposo * (aplica siempre, y al ser la UNICA declaracion con !important para * esa propiedad en todo el CSS en juego, gana sola sin necesitar * ganar por especificidad). * * BUG 2 (fondo funebre gris en reposo) y BUG 3 (hover pegajoso de iOS * cambia fondo y color): el truco de anteponer "body" a cada selector * SOLO suma un ELEMENTO a la especificidad (0,x,+1), nunca una CLASE - * y CSS compara primero el nivel de CLASES. Tres reglas del plugin * tienen MAS clases que nuestro bloque de reposo de la version anterior * (0,2,3) y le ganaban el "background"/"color" pese al !important de * los dos lados: * - div.pgw-product-image a.pgw-add-to-cart:hover (0,3,2) * - .pgw-style-funebre div.pgw-product-image a.pgw-add-to-cart (0,3,2) * - .pgw-style-funebre div.pgw-product-image a.pgw-add-to-cart:hover (0,4,2) * Arreglo: se infla el nivel de CLASES repitiendo ".pgw-add-to-cart" * varias veces en el propio selector (repetir una clase ya presente es * CSS valido: no cambia a que matchea, solo suma al conteo). Con eso el * bloque de reposo llega a (0,6,3) - 2 puntos de clase por encima del * rival mas fuerte (0,4,2) - y gana "background" en los tres escenarios * sin necesitar un selector ":hover" aparte (nuestra regla no exige * ":hover" en el propio selector, asi que se aplica SIEMPRE, incluso * cuando el navegador le pega ":hover" pegajoso al elemento). * Se agrega ademas "color" al bloque de reposo (con el MISMO valor que * ya trae la linea 727 del plugin, #960946: no es un color nuevo, es el * mismo que ya usaba la variante floral) para que el icono -que toma * "currentColor"- tampoco se vuelva crema (#FEF3E7) durante el hover * pegajoso. Y como esa misma regla de reposo tambien matchea en las * paginas funebres, se agrega un bloque NUEVO mas especifico * (".pgw-style-funebre ... a.pgw-add-to-cart" con "pgw-add-to-cart" * repetido) que reafirma "color:#4b5568" (el mismo valor que ya usa * product-grid-funebre.css) por encima de TODO lo anterior. Confirmado * leyendo el HTML real de /coronas-funebres/: ".pgw-style-funebre" vive * en "div.pgw-container" (varios niveles por encima de * "div.pgw-product-image", NUNCA en ) - por eso a esa regla se le * antepone "body " (con espacio, como ancestro real) y nunca * "body.pgw-style-funebre" (que exigiria el atributo en mismo y * nunca matchearia nada). * * Con esto, las reglas 2 y 3 tambien quedan cubiertas para el estado * .loading (que no declara background/color propio, hereda del bloque de * reposo) y para .added/.pgw-view-cart (que tambien se re-infla abajo * contra su propio rival mas fuerte, verificado leyendo el plugin linea * por linea: la combinacion ".pgw-view-cart:hover, .added:hover" -> * #BB5D80/#FEF3E7 !important, (0,3,2) y (0,4,2) respectivamente). * * ------------------------------------------------------------------------- * RONDA 2 DE CORRECCIONES (2026-09-14) - un esceptico midio con un trace * en el tiempo (11 muestras) sobre /amor-y-amistad/ a 390px movil y * encontro UN solo defecto real (los 5 criterios de aceptacion, medidos * en estado asentado, seguian pasando los 5 - esto es puro efecto visual * durante la transicion): * * BUG 4 (transition heredada del plugin): product-grid.css:727-728 trae * "transition: color .1s ease, background .1s ease, all .4s ease * !important" en el MISMO selector de reposo que fija bottom/opacity/ * visibility - y es la UNICA declaracion con !important sobre * "transition" en todo el CSS en juego. Ninguno de los 4 bloques de * este archivo declaraba "transition", asi que esa regla del plugin * seguia ganando sola (gana por ser la unica, ni siquiera hace falta * comparar especificidad - exactamente el mismo mecanismo que el BUG 1 * de la ronda 1, pero para otra propiedad). Efecto medido: cuando este * stylesheet llega DESPUES de que el navegador ya pinto la tarjeta con * el CSS del plugin (escenario real: el sitio carga 21-23 hojas de * forma asincrona con el patron loadCSS - loadCSS() en head.php - asi * que este archivo nuevo entra por una peticion de red separada), el * "all .4s ease" anima TODAS las propiedades que este archivo cambia * de golpe (width, height, border-radius, opacity, background...): la * pildora rosa vieja se ve "encogerse" hasta el circulo en ~400ms en * vez de aparecer ya formada. Es el mismo movimiento no pedido que el * dueño rechazo el 12-sep. * Arreglo: "transition: none !important" en el bloque de reposo. No * hace falta repetirlo en .loading/.added/funebre - "transition" no se * resetea entre bloques, el valor que gane para el elemento en cualquier * momento queda fijo para todos los cambios de clase posteriores sobre * el mismo elemento. La especificidad del bloque de reposo (0,6,3) ya * le sobra contra (0,2,2) del plugin - esto no cambia ningun calculo de * especificidad ya verificado, solo tapa una propiedad que no se habia * declarado. * * Inventario completo de reglas del plugin que compiten por bloque, con * su especificidad real (verificado leyendo product-grid.css y * product-grid-funebre.css linea por linea, no de memoria): * * REPOSO (posicion/geometria/opacity/visibility/background/color): * L727 div.pgw-product-image a.pgw-add-to-cart (0,2,2) !important en background/color, NO en el resto * L747 div.pgw-product-image:hover a.pgw-add-to-cart (0,3,2) SIN !important (bottom/opacity/visibility) * L753 div.pgw-product-image a.pgw-add-to-cart:hover (0,3,2) !important background/color * 892/957/1021 div.pgw-product-image a.pgw-add-to-cart (margin-top/font-size !important; height SIN !important) (0,2,2) x3 * product-grid-funebre.css .pgw-style-funebre div.pgw-product-image a.pgw-add-to-cart (0,3,2) !important background/color * product-grid-funebre.css .pgw-style-funebre div.pgw-product-image a.pgw-add-to-cart:hover (0,4,2) !important background/color <- rival mas fuerte * * .loading: * L774 .pgw-product-image .pgw-add-to-cart.loading (0,3,0) SIN !important (opacity, pointer-events) * * .added / .pgw-view-cart (ocultar por defecto, mostrar en hover del contenedor, colores): * div.pgw-product-image a.pgw-add-to-cart.added (0,3,2) !important visibility/opacity (bottom SIN !important) * div.pgw-product-image a.pgw-view-cart (0,2,2) !important visibility/opacity (bottom SIN !important) * div.pgw-product-image:hover a.pgw-add-to-cart.added (0,4,2) !important visibility/opacity (bottom SIN !important) * div.pgw-product-image:hover a.pgw-view-cart (0,3,2) !important visibility/opacity (bottom SIN !important) * div.pgw-product-image a.pgw-view-cart / a.pgw-add-to-cart.added (0,2,2) / (0,3,2) !important background/color (#F3DBD7/#960946) * div.pgw-product-image a.pgw-view-cart:hover / a.pgw-add-to-cart.added:hover (0,3,2) / (0,4,2) !important background-color/color (#BB5D80/#FEF3E7) <- rival mas fuerte * * Estrategia final de especificidad (clases inflando el conteo "b" + * "body" como ancestro real inflando "c" cuando aplica): * - reposo (0,6,3) -> gana a todo lo de arriba, margen +2 sobre (0,4,2) * - color funebre (0,8,3) -> gana al reposo (0,6,3) Y a (0,4,2), margen +2 sobre el reposo * - .loading (0,8,3) -> gana al reposo (0,6,3) con margen +2 (nunca empata) * - .added/.view-cart (0,8,3) -> gana al reposo (0,6,3) y al rival (0,4,2), margen +2/+4 * ========================================================================= */ @media (hover: none) { /* ----------------------------------------------------------------------- * 1) REPOSO - el boton se convierte en circulo, siempre visible. * Selector con "pgw-add-to-cart" repetido (5 veces en total, contando la * del propio "a.pgw-add-to-cart") mas "pgw-product-image": son 6 clases * en total, mas "body" como elemento extra -> (0,6,3). Gana por * CLASES (6 > 4) a cualquier rival de la tabla de arriba, con o sin * :hover, con o sin variante funebre - asi que no hace falta un selector * ":hover" aparte para el hover pegajoso de iOS (punto 5 del spec): esta * misma regla, que no exige ":hover" en su propio selector, sigue * matcheando y sigue ganando aunque el navegador le pegue el * pseudo-estado al elemento tras el toque. * --------------------------------------------------------------------- */ body div.pgw-product-image a.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart { /* posicion: arriba a la derecha (no abajo-centrado como la pildora) */ position: absolute !important; top: 8px !important; right: 8px !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 !important; /* pisa tambien el margin-top de las media queries del plugin (892/957/1021), que nudgeaban la pildora hacia arriba */ /* geometria: circulo de 40x40 */ width: 40px !important; height: 40px !important; /* pisa el height:4.2rem/4rem de esas mismas media queries */ border-radius: 50% !important; border: none !important; padding: 0 !important; /* en tactil no hay hover real: siempre visible (y con hover pegajoso de iOS tambien, por la especificidad explicada arriba) */ visibility: visible !important; opacity: 1 !important; /* clics: SIEMPRE activo. Sin esto, product-grid.css:774 (".loading { pointer-events:none }", sin !important) deja el circulo pintado pero 100% intocable durante el AJAX de agregar - ver BUG 1 en el comentario de cabecera. Como es la UNICA regla con !important que toca "pointer-events" en todo el CSS en juego, gana en cualquier estado (reposo/.loading/.added) sin depender de la especificidad. */ pointer-events: auto !important; /* look: blanco, discreto, sombra sutil (pisa el fondo rosado #F3DBD7 de la linea 727, el rosa #BB5D80 del :hover y el gris #D4D7DB/ #C3C6C9 de la variante funebre - ver tabla de rivales arriba) */ background: #fff !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .18) !important; /* mismo valor que ya trae la linea 727 del plugin para la variante floral (no es un color nuevo): se reafirma aqui para que el :hover pegajoso de iOS (linea ~753, que sube "color" a #FEF3E7 crema) no le robe el color al icono, que usa currentColor. La variante funebre pisa esto con el bloque 2 (mas abajo, mas especifico) reafirmando su propio #4b5568. */ color: #960946 !important; /* RONDA 2 - BUG 4: product-grid.css:727-728 trae "transition: color .1s ease, background .1s ease, all .4s ease !important" en este mismo selector de reposo, y es la UNICA declaracion !important sobre "transition" en todo el CSS en juego (gana sola, sin necesitar especificidad - igual que pointer-events en el BUG 1). Sin pisarla, cuando este stylesheet llega despues de que el plugin ya pinto la pildora (carga asincrona tipo loadCSS), el "all .4s ease" anima el cambio pildora->circulo y se ve "encoger" en vez de aparecer ya formado: el mismo movimiento no pedido que el dueño rechazo el 12-sep. No hace falta repetir esto en los bloques de abajo (.loading/.added/funebre): "transition" no se resetea entre cambios de clase sobre el mismo elemento. */ transition: none !important; /* el texto "Comprar Ahora"/"Ver Carrito" sigue en el DOM para lectores de pantalla, pero no ocupa espacio visible (tambien pisa el font-size:1.1rem!important de las media queries del plugin) */ font-size: 0 !important; line-height: 0 !important; /* el letter-spacing:2px que trae el boton (heredado del tema/plugin para su texto en mayuscula) NO se escala a 0 junto con el font-size: es un valor absoluto, asi que el texto invisible seguia empujando ~17px de espacio dentro del flex. Sin esto, ese hueco invisible le robaba ancho al icono (el unico flex-item con flex-shrink activo) y lo dejaba en ~17px en vez de 20px, corrido del centro. Medido y confirmado por CDP antes de este fix. */ letter-spacing: normal !important; /* centra el icono (::before) dentro del circulo */ display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; /* por encima de pgw-product-info (z-index:2) */ } /* El icono en si: pseudo-elemento con mask-image (SVG de carrito). background-color: currentColor toma el "color" que el bloque 1 (o el bloque 2 en funebre) le fija al boton - asi el icono nunca lleva un color fijo propio. */ body div.pgw-product-image a.pgw-add-to-cart::before { content: "" !important; display: block !important; width: 20px !important; height: 20px !important; background-color: currentColor !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 3h2.2l3.3 8.6-1.2 2.2a2 2 0 0 0 1.7 3h11v-2H9.4l1-1.8h6.6a2 2 0 0 0 1.8-1.1L22 6H6.4L5.5 3.6A1 1 0 0 0 4.6 3H3Z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 3h2.2l3.3 8.6-1.2 2.2a2 2 0 0 0 1.7 3h11v-2H9.4l1-1.8h6.6a2 2 0 0 0 1.8-1.1L22 6H6.4L5.5 3.6A1 1 0 0 0 4.6 3H3Z'/%3E%3C/svg%3E") !important; -webkit-mask-size: 20px !important; mask-size: 20px !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; /* defensivo: aunque el letter-spacing de arriba ya deja el texto invisible en 0px, que el icono nunca ceda espacio en el flex (es el unico elemento que nos importa que mida 20x20 siempre) */ flex: 0 0 20px !important; } /* ----------------------------------------------------------------------- * 2) VARIANTE FUNEBRE - reafirma su propio "color" por encima del * bloque 1. ".pgw-style-funebre" vive en "div.pgw-container", varios * niveles arriba de "div.pgw-product-image" (confirmado leyendo el HTML * real de /coronas-funebres/: nunca esta en ) - por eso aca "body" * va SEPARADO por un espacio, como ancestro real, y no pegado a * ".pgw-style-funebre" (que exigiria el atributo en el propio y * jamas matchearia). Clases: pgw-style-funebre(1) + pgw-product-image(1) + * pgw-add-to-cart(x6) = 8, mas "body"/div/a como elementos -> (0,8,3). * Gana al bloque 1 (0,6,3) y a ".pgw-style-funebre ... :hover" del * plugin (0,4,2) con margen de sobra. Mismo valor #4b5568 que ya usa * product-grid-funebre.css: no es un color nuevo. * --------------------------------------------------------------------- */ body .pgw-style-funebre div.pgw-product-image a.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart { color: #4b5568 !important; } /* ----------------------------------------------------------------------- * 3) .loading - al tocar, mientras WooCommerce agrega por AJAX. * product-grid.css:774 pone opacity:.7 y pointer-events:none, los dos * SIN !important - nuestro bloque 1 ya gana "opacity" y "pointer-events" * por !important solo (774 no tiene !important en ninguna de las dos). * Este bloque solo necesita PISAR el "opacity:1!important" del bloque 1 * con un valor distinto (.6, para dar la unica señal de "cargando" que * tiene sentido en un telefono): clases pgw-product-image(1) + pgw-add- * to-cart(x6) + loading(1) = 8, mas "body"/div/a -> (0,8,3), por encima * del bloque 1 (0,6,3) con margen +2 (nunca empata en clases, no depende * del orden de aparicion dentro del archivo). * --------------------------------------------------------------------- */ body div.pgw-product-image a.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.loading { opacity: .6 !important; } /* ----------------------------------------------------------------------- * 4) .added / .pgw-view-cart - despues de agregar. WooCommerce pone * .added y el JS del widget agrega .pgw-view-cart (y cambia el texto a * "Ver Carrito"); el segundo toque lleva al carrito. El plugin esconde * el boton por defecto y solo lo muestra con el contenedor en :hover * (rival mas fuerte real: ".pgw-view-cart:hover, .pgw-add-to-cart.added:hover" * con background-color/color !important, (0,3,2) y (0,4,2) - ver tabla * de cabecera). Clases: pgw-product-image(1) + pgw-add-to-cart(x6) + * added(1) = 8 para el primer selector, y pgw-product-image(1) + * pgw-view-cart(x7) = 8 para el segundo - ambos por encima del bloque 1 * (0,6,3, margen +2) y del rival mas fuerte (0,4,2, margen +4). * * El circulo se invierte: fondo currentColor (el mismo color de marca * que ya fija el bloque 1 o el bloque 2 en funebre) e icono blanco en * forma de check, para confirmar que el toque funciono. No se declara * "color" aca: el que ya gano en el bloque 1/2 sigue mandando, y * currentColor lo toma tal cual (floral o funebre, segun corresponda). * --------------------------------------------------------------------- */ body div.pgw-product-image a.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.added, body div.pgw-product-image a.pgw-view-cart.pgw-view-cart.pgw-view-cart.pgw-view-cart.pgw-view-cart.pgw-view-cart.pgw-view-cart { visibility: visible !important; opacity: 1 !important; background: currentColor !important; } body div.pgw-product-image a.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.pgw-add-to-cart.added::before, body div.pgw-product-image a.pgw-view-cart.pgw-view-cart.pgw-view-cart.pgw-view-cart.pgw-view-cart.pgw-view-cart.pgw-view-cart::before { background-color: #fff !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") !important; } }