/* A Vaca Product Extras — estilos del front */ /* ------------------------------------------------------------------------- Corte Etiquetas informativas con los formatos en los que se vende la pieza. Todas las medidas salen de variables CSS: puedes retocarlas desde Elementor (CSS personalizado) sin tocar este archivo. ------------------------------------------------------------------------- */ .avpe-corte { --avpe-corte-espacio: 10px; --avpe-corte-borde: #dcdcdc; --avpe-corte-radio: 2px; --avpe-corte-fondo: #ffffff; --avpe-corte-color: #8f8f8f; --avpe-corte-tamano: 15px; --avpe-corte-relleno: 0.6em 1.6em; --avpe-corte-label-color: #111111; --avpe-corte-label-tamano: 16px; --avpe-corte-label-espacio: 14px; margin: 0 0 1.25em; /* Hereda la tipografía del tema en lugar de imponer una. */ font-family: inherit; } .avpe-corte .avpe-corte__label { display: block; margin: 0 0 var(--avpe-corte-label-espacio); color: var(--avpe-corte-label-color); font-size: var(--avpe-corte-label-tamano); font-weight: 700; line-height: 1.2; } .avpe-corte .avpe-corte__list { display: flex; flex-wrap: wrap; gap: var(--avpe-corte-espacio); margin: 0; padding: 0; list-style: none; } /* Una sola regla para la etiqueta: si el reset de
  • fuese aparte, ganaría por especificidad («.clase li» pesa más que «.clase») y se comería el relleno, que es justo lo que pasaba antes. */ .avpe-corte .avpe-corte__list > .avpe-corte__item { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: var(--avpe-corte-relleno); border: 1px solid var(--avpe-corte-borde); border-radius: var(--avpe-corte-radio); background: var(--avpe-corte-fondo); color: var(--avpe-corte-color); font-size: var(--avpe-corte-tamano); line-height: 1.2; list-style: none; white-space: nowrap; } /* En pantallas estrechas dejamos que las etiquetas ocupen todo el ancho en lugar de desbordar. */ @media (max-width: 480px) { .avpe-corte .avpe-corte__list > .avpe-corte__item { flex: 1 1 100%; white-space: normal; } } /* ------------------------------------------------------------------------- Etiqueta de descuento — shortcode [descuento_producto] Mismo coral que el botón de añadir al carrito, con texto oscuro. ------------------------------------------------------------------------- */ .avpe-descuento { --avpe-descuento-fondo: #ee8872; --avpe-descuento-color: #111111; --avpe-descuento-tamano: 13px; --avpe-descuento-relleno: 0.4em 0.9em; --avpe-descuento-radio: 2px; --avpe-descuento-peso: 500; display: inline-block; padding: var(--avpe-descuento-relleno); border-radius: var(--avpe-descuento-radio); background: var(--avpe-descuento-fondo); color: var(--avpe-descuento-color); font-family: inherit; font-size: var(--avpe-descuento-tamano); font-weight: var(--avpe-descuento-peso); line-height: 1.2; white-space: nowrap; } /* ------------------------------------------------------------------------- Galería de producto por proporción — clases para Elementor Pon una de estas clases en el contenedor que envuelve la galería (la columna, o el propio widget) desde Elementor → Avanzado → Clases CSS: avpe-galeria 1:1 (cuadrada) avpe-galeria-3-4 vertical avpe-galeria-4-3 apaisada avpe-galeria-4-5 vertical suave avpe-galeria-16-9 panorámica A diferencia del ajuste global de WooCommerce → Ajustes → Productos, que fija una altura en píxeles, aquí se usa una proporción: la galería se mantiene 1:1 sea cual sea el ancho de la columna o del dispositivo. Estas reglas están hechas para ganar SIEMPRE: · [class*="avpe-galeria"] repetido dos veces sube la especificidad. · El prefijo html body añade dos selectores de tipo más. · Todas las propiedades van con !important. · La hoja se encola con prioridad 999 para caer lo más tarde posible. Y por si alguna hoja ajena usara !important en línea, galeria.js vuelve a forzarlo directamente sobre el elemento. ------------------------------------------------------------------------- */ /* Cómo encaja la foto en su caja. Una sola variable evita que dos reglas de object-fit peleen entre sí: antes la regla base ganaba por especificidad y el modificador -recortar salía tachado en el inspector. */ [class*="avpe-galeria"] { --avpe-galeria-ajuste: contain; } [class*="avpe-galeria-recortar"] { --avpe-galeria-ajuste: cover; } .avpe-galeria, .avpe-galeria-1-1 { --avpe-galeria-ratio: 1 / 1; } .avpe-galeria-3-4 { --avpe-galeria-ratio: 3 / 4; } .avpe-galeria-4-3 { --avpe-galeria-ratio: 4 / 3; } .avpe-galeria-4-5 { --avpe-galeria-ratio: 4 / 5; } .avpe-galeria-16-9 { --avpe-galeria-ratio: 16 / 9; } /* El visor manda la proporción. · .flex-viewport lo crea FlexSlider al arrancar. · El segundo selector cubre el instante previo a que arranque, cuando la pista todavía cuelga directamente de la galería. */ html body [class*="avpe-galeria"][class*="avpe-galeria"] .woocommerce-product-gallery .flex-viewport, html body [class*="avpe-galeria"][class*="avpe-galeria"] .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: var( --avpe-galeria-ratio, 1 / 1 ) !important; overflow: hidden !important; } /* La pista y las diapositivas ocupan todo el alto del visor. OJO: a la pista NO se le puede poner aspect-ratio, porque FlexSlider le escribe un ancho del 1200% y saldría una altura descomunal. */ html body [class*="avpe-galeria"][class*="avpe-galeria"] .woocommerce-product-gallery .flex-viewport > .woocommerce-product-gallery__wrapper, html body [class*="avpe-galeria"][class*="avpe-galeria"] .woocommerce-product-gallery .woocommerce-product-gallery__image { height: 100% !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; } html body [class*="avpe-galeria"][class*="avpe-galeria"] .woocommerce-product-gallery .woocommerce-product-gallery__image > a { display: block !important; width: 100% !important; height: 100% !important; } /* La foto, entera y centrada dentro de la caja: ni recortada ni deformada. */ html body [class*="avpe-galeria"][class*="avpe-galeria"] .woocommerce-product-gallery .woocommerce-product-gallery__image img:not(.zoomImg) { width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; aspect-ratio: auto !important; object-fit: var( --avpe-galeria-ajuste, contain ) !important; object-position: center !important; } /* La lupa se dibuja a tamaño completo sobre la foto y ya no coincide con lo que se ve, así que la ocultamos (igual que en el ajuste global). */ html body [class*="avpe-galeria"][class*="avpe-galeria"] .woocommerce-product-gallery .woocommerce-product-gallery__image .zoomImg { display: none !important; } /* La misma clase vale para los LISTADOS de producto que haya dentro del contenedor, no solo para la galería de la ficha. TÉCNICA: la proporción va en la CAJA (un div normal, donde aspect-ratio es sólido) y la imagen se posiciona dentro ocupándola entera. REGLA DE ORO: la caja tiene que EXISTIR siempre que posicionemos la imagen. Si la imagen se pone en absoluto y su caja no existe, se coloca contra cualquier antepasado y desaparece. Por eso la caja es el propio WIDGET, no el .elementor-widget-container: Elementor no siempre genera ese envoltorio y el marcado de esta web, de hecho, no lo tiene. */ html body [class*="avpe-galeria"][class*="avpe-galeria"] ul.products li.product .post_featured, html body [class*="avpe-galeria"][class*="avpe-galeria"] .e-loop-item .elementor-widget-image, html body [class*="avpe-galeria"][class*="avpe-galeria"] .e-loop-item .elementor-widget-theme-post-featured-image { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: var( --avpe-galeria-ratio, 1 / 1 ) !important; overflow: hidden !important; } /* Si Elementor sí generó el envoltorio interno, que no estorbe: lo dejamos transparente para que la imagen se coloque contra el widget. */ html body [class*="avpe-galeria"][class*="avpe-galeria"] .e-loop-item .elementor-widget-image > .elementor-widget-container, html body [class*="avpe-galeria"][class*="avpe-galeria"] .e-loop-item .elementor-widget-theme-post-featured-image > .elementor-widget-container { position: static !important; width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto !important; } /* El enlace, si lo hay, ocupa toda la caja. */ html body [class*="avpe-galeria"][class*="avpe-galeria"] ul.products li.product .post_featured > a, html body [class*="avpe-galeria"][class*="avpe-galeria"] .e-loop-item .elementor-widget-image a, html body [class*="avpe-galeria"][class*="avpe-galeria"] .e-loop-item .elementor-widget-theme-post-featured-image a { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: block !important; width: 100% !important; height: 100% !important; } /* La imagen llena la caja. Su alto sale de la caja, no de sus proporciones. */ html body [class*="avpe-galeria"][class*="avpe-galeria"] ul.products li.product .post_featured img, html body [class*="avpe-galeria"][class*="avpe-galeria"] .e-loop-item .elementor-widget-image img, html body [class*="avpe-galeria"][class*="avpe-galeria"] .e-loop-item .elementor-widget-theme-post-featured-image img { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; object-fit: var( --avpe-galeria-ajuste, contain ) !important; object-position: center !important; } /* Respaldo para marcados de listado que no conocemos: aquí NO posicionamos en absoluto, porque no hay caja garantizada. Solo la proporción. */ html body [class*="avpe-galeria"][class*="avpe-galeria"] ul.products li.product > a > img, html body [class*="avpe-galeria"][class*="avpe-galeria"] ul.products li.product > .woocommerce-LoopProduct-link > img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: var( --avpe-galeria-ratio, 1 / 1 ) !important; object-fit: var( --avpe-galeria-ajuste, contain ) !important; object-position: center !important; } /* La variante recortada ya no necesita reglas propias: basta con que la clase avpe-galeria-recortar cambie la variable --avpe-galeria-ajuste, arriba. Se usa junto a la de proporción: avpe-galeria avpe-galeria-recortar */ /* ------------------------------------------------------------------------- Foto con medida fija — clases para Elementor Pensado para una fotografía suelta del diseño, no para productos. Se pone en el WIDGET DE IMAGEN (o en un contenedor que solo tenga esa foto), desde Elementor → Avanzado → Clases CSS: avpe-foto 341 × 357, se encoge si la columna es más estrecha avpe-foto-fija 341 × 357 exactos, siempre, sin encogerse avpe-foto-entera modificador: la foto se ve entera en vez de recortarse Para otra medida no hace falta tocar el plugin, basta con cambiar los dos números (van SIN unidad) en el CSS personalizado del widget: selector { --avpe-foto-ancho: 500; --avpe-foto-alto: 300; } Todo se decide con variables y hay una sola declaración de cada propiedad, así no puede pasar que una regla tache a la otra. ------------------------------------------------------------------------- */ [class*="avpe-foto"] { --avpe-foto-ancho: 341; --avpe-foto-alto: 357; --avpe-foto-w: 100%; --avpe-foto-max: calc( var( --avpe-foto-ancho ) * 1px ); --avpe-foto-h: auto; --avpe-foto-ar: var( --avpe-foto-ancho ) / var( --avpe-foto-alto ); --avpe-foto-ajuste: cover; } /* Medida exacta e inamovible: el alto va en píxeles y no hace falta proporción, porque las dos medidas están fijadas. */ [class*="avpe-foto-fija"] { --avpe-foto-w: calc( var( --avpe-foto-ancho ) * 1px ); --avpe-foto-max: none; --avpe-foto-h: calc( var( --avpe-foto-alto ) * 1px ); --avpe-foto-ar: auto; } [class*="avpe-foto-entera"] { --avpe-foto-ajuste: contain; } /* La caja lleva la medida y la foto se posiciona dentro. La caja es el propio WIDGET, que siempre existe; .elementor-widget-container no está garantizado (este sitio no lo genera) y usarlo dejaba la imagen sin caja: desaparecía. */ html body [class*="avpe-foto"][class*="avpe-foto"].elementor-widget-image, html body [class*="avpe-foto"][class*="avpe-foto"] .elementor-widget-image { position: relative !important; display: block !important; width: var( --avpe-foto-w ) !important; max-width: var( --avpe-foto-max ) !important; height: var( --avpe-foto-h ) !important; min-height: 0 !important; aspect-ratio: var( --avpe-foto-ar ) !important; overflow: hidden !important; } /* Envoltorio interno, si Elementor lo generó: transparente. */ html body [class*="avpe-foto"][class*="avpe-foto"].elementor-widget-image > .elementor-widget-container, html body [class*="avpe-foto"][class*="avpe-foto"] .elementor-widget-image > .elementor-widget-container { position: static !important; width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto !important; } html body [class*="avpe-foto"][class*="avpe-foto"].elementor-widget-image a, html body [class*="avpe-foto"][class*="avpe-foto"] .elementor-widget-image a { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: block !important; width: 100% !important; height: 100% !important; } html body [class*="avpe-foto"][class*="avpe-foto"].elementor-widget-image img, html body [class*="avpe-foto"][class*="avpe-foto"] .elementor-widget-image img { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; object-fit: var( --avpe-foto-ajuste, cover ) !important; object-position: center !important; } /* ------------------------------------------------------------------------- Paginación en cajas — clase para Elementor Pon la clase en el widget Loop Grid (o en un contenedor por encima) desde Elementor → Avanzado → Clases CSS: avpe-paginacion Deja los números en caja gris y la página actual en caja negra, como en el diseño. Sirve igual para la paginación de Elementor y para la de WooCommerce, que usan las mismas clases .page-numbers / .current. Para retocarlo, en el CSS personalizado del widget: selector { --avpe-pag-medida: 52px; --avpe-pag-fondo: #eee; } ------------------------------------------------------------------------- */ [class*="avpe-paginacion"] { --avpe-pag-medida: 44px; --avpe-pag-espacio: 8px; --avpe-pag-radio: 2px; --avpe-pag-tamano: 15px; --avpe-pag-fondo: #e6e6e6; --avpe-pag-color: #111111; --avpe-pag-fondo-hover: #d5d5d5; --avpe-pag-fondo-activo: #111111; --avpe-pag-color-activo: #ffffff; /* flex-start = a la izquierda, como el diseño. center para centrarla. */ --avpe-pag-alineacion: flex-start; /* Aire por encima: sin esto la paginación queda pegada al último precio, porque la regla del