/* ========================================================================== GRILLA DE PRODUCTOS — BOTÓN "COMPRAR AHORA" EN PANTALLAS TÁCTILES Tema hijo astra-child · css/global/widgets/product-grid-tactil.css Creado: 2026-09-12 (hora de Bogotá; el servidor ya marcaba 2026-09-13 UTC) QUÉ ARREGLA El widget `lumik_product_grid` deja el botón "Comprar Ahora" oculto (`visibility:hidden; opacity:0`, product-grid.css línea 727 del plugin) y lo revela SOLO con `div.pgw-product-image:hover` (línea 747). En un teléfono `:hover` no existe, así que el botón no se ve ni participa del hit-test: medido con Chrome por CDP, 0 de 543 tarjetas recibían su propio clic y el toque se lo llevaba `H3.pgw-product-title`. SON DOS CAUSAS Y HACEN FALTA LAS DOS CORRECCIONES: (A) el botón está oculto -> ni siquiera es blanco de eventos; (B) `div.pgw-product-info` se sube -2.4rem (móvil y escritorio) / -2.2rem (tablet) y se monta sobre la caja del botón. Medido: con el botón sólo hecho VISIBLE, el clic se lo seguía llevando el título en 0 de 72 tarjetas, porque el bloque de título queda 34,5 px encima. ALCANCE DELIBERADO Todo vive dentro de `@media (hover: none)`: se aplica únicamente donde el puntero primario NO puede hacer hover. En escritorio no cambia nada — el efecto de "aparecer al pasar el mouse" es una decisión de diseño del sitio, no un bug, y no se toca en semana de pico. NO se usa `screen and (max-width: 767px)` (la media query que ya usa el plugin) porque una ventana de escritorio angosta también la matchea y ahí perderíamos el hover sin que el dispositivo sea táctil. VARIANTE FÚNEBRE: cubierta sin escribir una línea extra. Los selectores de acá no mencionan `.pgw-style-funebre`, así que matchean las dos variantes; y como no declaramos `background` ni `color`, los `!important` de color de `product-grid-funebre.css` (líneas 21 y 26) siguen mandando intactos. ========================================================================== */ @media (hover: none) { /* ---------------------------------------------------------------------- 1) MOSTRAR EL BOTÓN Y SUBIRLO A SU POSICIÓN DE "HOVER" ---------------------------------------------------------------------- `visibility` y `opacity` lo devuelven al hit-test (con `visibility:hidden` el navegador ni lo considera). `bottom: 0` es la MITAD que falta del arreglo: es exactamente la posición que hoy le da el `:hover` del plugin (línea 747). Sin esto, el botón se ve pero el clic sigue yéndose al título — medido, 0 de 72. `z-index: 3` es la red de seguridad contra el apilado: `.pgw-product-info` es `position:relative` con `z-index:2` y el botón también tenía 2, así que empataban y ganaba `.pgw-product-info` por orden de DOM. Con la regla 2 de abajo ya no se solapan, pero un píxel de redondeo en algún ancho no puede costar una venta. No tiene ningún efecto visual. POR QUÉ ESTOS TRES SELECTORES Y POR QUÉ EMPIEZAN CON `body`: la línea 786 del plugin dice div.pgw-product-image a.pgw-add-to-cart.added, div.pgw-product-image a.pgw-view-cart { visibility:hidden!important } con especificidad (0,3,2). Escribir el arreglo al peso natural (0,2,2) + !important PIERDE contra ella, y el botón desaparece justo después de que el cliente lo toca (WooCommerce le agrega `.added` y el JS del widget le agrega `.pgw-view-cart` y le cambia el texto a "Ver Carrito"). Con el prefijo `body` estos selectores quedan en (0,2,3) y (0,3,3): le ganan a la línea 786 por ESPECIFICIDAD, no por orden de cascada — o sea que el parche funciona aunque algún día cambie el orden de las hojas. (Hoy, medido, la hoja del tema hijo ya sale después: el link del plugin está en el byte 122.222 de /amor-y-amistad/ y los 24 handles `global-*` van todos detrás.) NO tocamos `background`, `color`, `text-transform` ni `letter-spacing`: el botón sigue siendo el mismo `` de siempre, así que no hay nada que renegociar con Astra ni con el kit de Elementor. ---------------------------------------------------------------------- */ body div.pgw-product-image a.pgw-add-to-cart, body div.pgw-product-image a.pgw-add-to-cart.added, body div.pgw-product-image a.pgw-view-cart { visibility: visible !important; opacity: 1 !important; bottom: 0 !important; z-index: 3 !important; } /* ---------------------------------------------------------------------- 2) DEVOLVER EL BLOQUE DE TÍTULO A SU LUGAR ---------------------------------------------------------------------- El plugin sube `div.pgw-product-info` con `margin-top: -2.4rem` (líneas 899 y 964) y `-2.2rem` (línea 1028) para tapar el hueco que dejaba el botón invisible. Con el botón ya visible ese margen negativo lo monta encima: medido, 34,5 px de solape y el centro del botón cayendo dentro de `.pgw-product-info`. Ponerlo en 0 sólo en táctil: medido, el solape pasa de +34,5 px a -12 px (12 px de aire, que son el `margin-bottom:12px` que el plugin ya le da a `.pgw-product-image`) y los botones pasan a recibir su propio clic. La tarjeta crece de 185,4 px a 218,3 px en móvil. POR QUÉ NO ALCANZABA CON DEJAR EL SOLAPE: el botón mide 4rem de alto y la píldora del título 3rem; con el solape, el botón permanente taparía la mitad superior del título en las ~550 tarjetas del sitio. En escritorio eso es tolerable porque dura lo que dura el hover; acá sería el estado normal. ESTO NO PRODUCE CLS: la hoja es bloqueante y va en el `` (el handle no está en la lista blanca `$async_handles` del loadCSS artesanal), así que la altura correcta se pinta desde el primer frame. Especificidad (0,2,3) contra la (0,1,1) SIN `!important` del plugin: le gana de sobra. El `!important` va igual porque el plugin la repite en tres media queries y no queremos depender de cuál matchea. ---------------------------------------------------------------------- */ body div.pgw-product-item div.pgw-product-info { margin-top: 0 !important; } /* ---------------------------------------------------------------------- 3) NO PERDER EL FEEDBACK DE "AGREGANDO…" ---------------------------------------------------------------------- El plugin atenúa el botón mientras corre el AJAX (`.pgw-product-image .pgw-add-to-cart.loading { opacity: 0.7 }`, línea 774, sin !important). Nuestro `opacity: 1 !important` de la regla 1 se lo comería, y en un teléfono esa atenuación es la única señal de que el toque registró antes de que abra el drawer del carrito. Se la devolvemos con (0,3,3), que le gana a nuestra propia regla 1 (0,2,3). `pointer-events: none` sigue siendo del plugin: no lo tocamos. ---------------------------------------------------------------------- */ body div.pgw-product-image a.pgw-add-to-cart.loading { opacity: 0.7 !important; } } /* ========================================================================== LO QUE ESTE ARCHIVO NO HACE, A PROPÓSITO - No le pone `pointer-events: none` al título ni a `.pgw-product-info`: están envueltos en `a.pgw-product-link--info`, un enlace agregado a propósito para hacer clickeables título y precio. Además, medido, no aportaba nada sobre este arreglo. - No saca al botón de `position: absolute`: probado, cae DEBAJO de la foto (el contenedor usa `padding-bottom: 140,578px` como truco de aspect-ratio) y el clic se lo lleva `IMG.pgw-img-primary`. - No toca nada fuera de `(hover: none)`: escritorio queda byte a byte igual. - No toca colores, tipografía ni el link "Ver carrito" que WooCommerce inyecta (`a.added_to_cart`, que el plugin oculta en la línea 780). TRABAJO DE OCTUBRE, NO DE ESTA SEMANA: rediseñar la tarjeta para que el botón tenga su propio espacio reservado (hoy hay tarjetas sin botón —1 en coronas, 2 en arreglos fúnebres— porque el producto no es simple), y hacer que las páginas de grilla alimenten `window.ga4w.data.products` para que GA4 mida los `add_to_cart` (gotcha 76). ========================================================================== */