/* ========================================================================== GRILLA DE PRODUCTOS — LAS FRANJAS DEL BOTÓN "COMPRAR AHORA" EN ESCRITORIO Tema hijo astra-child · css/global/widgets/product-grid-escritorio.css Creado: 2026-09-12 (hora de Bogotá; el servidor ya marcaba 2026-09-13 UTC) HERMANO DE `product-grid-tactil.css`, Y NO SE PISAN NUNCA Aquel vive entero dentro de `@media (hover: none)` y resuelve el táctil mostrando el botón siempre y devolviendo `margin-top: 0` al bloque de título. Éste vive entero dentro de `@media (hover: hover)`. Las dos consultas son mutuamente excluyentes: ningún dispositivo aplica ambas. QUÉ ARREGLA En escritorio el botón "Comprar Ahora" aparece al pasar el mouse (`div.pgw-product-image:hover`, product-grid.css línea 747) y el chip magenta del título queda ENCIMA de su mitad inferior. Eso es diseño y se respeta: el botón asoma por arriba del chip y se ve bien. El defecto está en los COSTADOS. El botón mide 230,5 px de ancho y el chip del título sólo 176,4 px, así que a la altura del chip quedan dos franjas de 27 px de puro botón rosa, perfectamente visibles. Esas franjas NO reciben su clic: se lo lleva `div.pgw-product-info`, que es transparente ahí pero ocupa el ancho completo de la tarjeta. POR QUÉ SE LO LLEVA: `div.pgw-product-info` es `position: relative` con `z-index: 2` (product-grid.css línea 827) y el botón también tiene `z-index: 2` (línea 745). Empatan, y en un empate gana el que va después en el DOM — que es el bloque de título. Encima el plugin lo sube con `margin-top: -2.4rem` (líneas 899 y 964), montándolo sobre la caja del botón. MEDIDO EN PRODUCCIÓN, con clics de mouse de verdad (no `element.click()`): un clic en cualquiera de las dos franjas navega a la ficha del producto y NO agrega al carrito — 4 de 4 entre `/ramos-flores/` y `/coronas-funebres/`, lado izquierdo y derecho. Es una falla silenciosa: el cliente ve un botón, le pega, y termina en otra página sin nada en el carrito. Del área rosa VISIBLE del botón, la que recibía su propio clic era el 84,8 % a 1440 px y el 86,8 % a 1024 px. Con esta hoja pasa a 97,6 % y 97,5 % — de 1.556 px² perdidos a 251 px² (lo que queda son las esquinas redondeadas y el borde del precio, que no son botón). POR QUÉ NO SE ARREGLA CON `z-index` Subir el botón a `z-index: 3` lo pone a él por encima del chip: probado y CAPTURADO, parte el título al medio ("Finesse" queda tapado por la mitad). Rompe el diseño. La corrección tiene que dejar el pintado exactamente como está y tocar sólo el hit-test — que es justo lo que hace `pointer-events`, una propiedad que no pinta nada. POR QUÉ HACEN FALTA LOS DOS SELECTORES DE LA REGLA 1 No alcanza con `div.pgw-product-info`: ese div está ENVUELTO por `a.pgw-product-link--info`, un enlace agregado a propósito para que título y precio lleven a la ficha. Si sólo se desactiva el div, el `` padre sigue ocupando el mismo lugar y sigue comiéndose el clic. ========================================================================== */ @media (hover: hover) { /* ---------------------------------------------------------------------- 1) QUE EL ENVOLTORIO TRANSPARENTE DEJE PASAR EL CLIC ---------------------------------------------------------------------- `pointer-events: none` no cambia un solo píxel pintado: sólo saca al elemento del hit-test, así que el clic llega al botón que está debajo. Verificado comparando capturas de la tarjeta con y sin esta hoja. ---------------------------------------------------------------------- */ body div.pgw-product-item a.pgw-product-link--info, body div.pgw-product-item div.pgw-product-info { pointer-events: none; } /* ---------------------------------------------------------------------- 2) DEVOLVERLE EL CLIC AL TÍTULO Y AL PRECIO ---------------------------------------------------------------------- Son los dos únicos hijos que el cliente ve y que deben seguir llevando a la ficha del producto. Al volverlos blanco de eventos otra vez, el clic sobre ellos burbujea hasta `a.pgw-product-link--info` y el navegador activa el enlace igual que siempre — `pointer-events: none` en un ancestro no impide que se dispare la acción por defecto del enlace cuando el blanco es un descendiente. MEDIDO: la superficie del chip que sigue navegando al producto pasa de 100 % a 99,3 %. El 0,7 % son los bordes redondeados del chip, donde el píxel ya no es chip. ---------------------------------------------------------------------- */ body div.pgw-product-item div.pgw-product-info .pgw-product-title, body div.pgw-product-item div.pgw-product-info .pgw-product-price { pointer-events: auto; } } /* ========================================================================== LO QUE ESTE ARCHIVO NO HACE, A PROPÓSITO - No cambia el diseño de revelar el botón con el mouse. Eso es una decisión del sitio, no un bug, y sigue igual. - No toca `z-index`, `margin-top`, `bottom`, colores ni tipografía: nada que pinte. Una captura de la tarjeta con y sin esta hoja da el mismo resultado. - No toca el táctil: todo está dentro de `@media (hover: hover)`, que en un teléfono no matchea. - No arregla el hueco de medición del gotcha 76: en las páginas de grilla GA4 sigue sin registrar `add_to_cart`, porque `window.ga4w.data.products` no se llena. O sea que esta recuperación de clics NO se va a ver en GA4. CÓMO REVERTIR Borrar este archivo y purgar. El auto-descubridor de `css/load-global-styles.php` barre `/css/global/**/*.css`, así que al no estar el archivo el handle deja de encolarse solo: ssh cr 'rm ~/domains/floristeriahechizosdeamor.com/public_html/wp-content/themes/astra-child/css/global/widgets/product-grid-escritorio.css cd ~/domains/floristeriahechizosdeamor.com/public_html && wp litespeed-purge all' ========================================================================== */