/* Arreglos de interfaz de la tienda Wallflower. Va en un mu-plugin con handle propio porque wallflower-theme-switch.php desregistra wf-style en prioridad 99 y este CSS se perdería. */ /* ------------------------------------------------------------------ 1. Parpadeo al pasar el ratón por el borde ------------------------------------------------------------------ El tema movía el elemento con transform: translateY(-Npx) en :hover. Al subir, el borde se aparta del cursor -> deja de estar en hover -> vuelve a su sitio -> vuelve a estar en hover... en bucle. Se ve como un temblor de un par de píxeles con cambio de color. Se quita el desplazamiento; la sombra y el color siguen dando el efecto. */ .woocommerce ul.products li.product:hover, .wf-card:hover, .wf-collection:hover, .wf-btn:hover, .wf-iconbtn:hover, .wf-social a:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce .checkout button#place_order:hover { transform: none !important; } /* La sombra se refuerza un poco para que la tarjeta siga sintiéndose "elevada" sin necesidad de moverse. */ .woocommerce ul.products li.product:hover { box-shadow: 0 14px 34px rgba(120, 40, 70, .16) !important; } /* El zoom de la foto sí se queda: ocurre dentro de la tarjeta y no cambia el área sensible al ratón, así que no parpadea. */ /* ------------------------------------------------------------------ 2. El enlace "Ver carrito" quedaba pegado al botón, en la misma línea ------------------------------------------------------------------ WooCommerce lo inserta justo después del botón tras añadir por AJAX. El tema no lo contemplaba, así que caía en línea y descuadraba la tarjeta. */ .woocommerce ul.products li.product .added_to_cart { display: block; width: auto; margin: .7rem 1.2rem 0; text-align: center; font-size: .85rem; letter-spacing: .04em; color: var(--wf-rose-deep, #a63d5b); text-decoration: underline; text-underline-offset: 3px; } .woocommerce ul.products li.product .added_to_cart:hover { opacity: .75; } /* El botón ya añadido y el enlace comparten ancho, para que la tarjeta no cambie de altura de forma brusca. */ .woocommerce ul.products li.product .button.added { margin-bottom: 0; } /* Los estilos del campo del cupón se quitaron junto con el propio campo: lo apaga wallflower-sin-cupones.php. */ /* ------------------------------------------------------------------ 3. El carrito, en paralelo ------------------------------------------------------------------ WooCommerce apila el detalle del pedido y la caja de totales, y el tema los mete además en el ancho estrecho de una entrada: en un monitor quedaba una columna de 820 px, medio ancho de pantalla sin usar a los lados, y el total tan abajo que había que desplazarse para ver cuánto se iba a pagar. A partir de 900 px van uno al lado del otro y la caja de totales acompaña mientras se recorre el detalle. Por debajo de eso se apilan solos, que en un teléfono dos columnas no caben. */ .woocommerce-cart .wf-wrap--narrow { width: min(1120px, 100% - var(--wf-gut) * 2); } /* A 900 px las dos columnas caben, pero la tabla del detalle se queda en 400 y sus cinco columnas se aprietan: el corte se sube a 1024. */ @media (min-width: 1024px) { /* El :has() evita que el carrito vacío —que no trae formulario— se quede con una rejilla de dos columnas y un hueco al lado. */ .woocommerce-cart .wf-entry__content > .woocommerce:has(form.woocommerce-cart-form) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); align-items: start; gap: clamp(1.6rem, 3vw, 2.6rem); } /* Los avisos y las ventas cruzadas siguen a todo lo ancho. */ .woocommerce-cart .wf-entry__content > .woocommerce > .woocommerce-notices-wrapper, .woocommerce-cart .wf-entry__content > .woocommerce > .cross-sells { grid-column: 1 / -1; } .woocommerce-cart .cart-collaterals { width: 100%; margin: 0; } /* WooCommerce flota los totales al 48 %; dentro de una rejilla eso sobra. */ .woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-cart .cart-collaterals .cross-sells { float: none; width: 100%; } .woocommerce-cart .cart-collaterals .cart_totals { position: sticky; top: 6.5rem; /* Debajo de la cabecera, que va fija. */ } /* El título de la caja se alinea con la primera fila de la tabla. */ .woocommerce-cart .cart-collaterals .cart_totals > h2 { margin-top: 0; } } /* ------------------------------------------------------------------ 4. El carrito en el teléfono ------------------------------------------------------------------ WooCommerce vuelca la tabla a una fila por dato y esconde la foto del producto: la primera línea quedaba con la equis de borrar y nada más, y el nombre aparecía tres líneas más abajo, separado de su foto. La fila del artículo pasa a ser una rejilla de tres columnas —equis, foto y nombre— y solo el precio, la cantidad y el subtotal siguen apilados debajo, que son los que se leen como «etiqueta: valor». */ @media (max-width: 768px) { .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: .8rem; } .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-remove, .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-thumbnail, .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-name { border-top: 0; padding-left: 0; padding-right: 0; text-align: left !important; } .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-remove { padding-left: 1.1rem; } .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-thumbnail { display: block !important; } .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; display: block; } .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-name { padding-right: 1.1rem; line-height: 1.35; } /* Al lado de su foto, el rótulo «Producto:» sobra. */ .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-thumbnail::before, .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-name::before { display: none; } .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-price, .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-quantity, .woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-subtotal { grid-column: 1 / -1; } /* La fila de «actualizar carrito» no necesita el rayado de las filas pares. */ .woocommerce-cart table.shop_table_responsive td.actions { background: transparent !important; } } /* ------------------------------------------------------------------------- * Selector de variante (Color) * * WooCommerce pinta un