/** * ZIHOUSE · SISTEMA GLOBAL DE FOTOGRAFÍA DE PRODUCTO * * EL PROBLEMA QUE RESUELVE * ------------------------ * El catálogo mezcla dos tipos de foto que nadie normalizó al importarlas: * packshots recortados sobre blanco puro y fotos de ambiente a sangre. Cuando * un packshot con blanco incrustado en el JPEG se coloca sobre un fondo crema, * aparece un rectángulo blanco flotando. Eso pasaba en la rejilla de tienda, en * el panel del carrito, en las sugerencias y en el resumen del pedido, y era lo * que hacía que la tienda pareciera montada a trozos. * * LA SOLUCIÓN * ----------- * No se puede quitar por CSS un blanco que está dentro del píxel. Lo que sí se * puede es dejar de pelearse con él: el ESCENARIO donde vive toda fotografía de * producto es blanco puro, exactamente el mismo blanco que traen los packshots. * La costura desaparece porque ya no hay dos blancos distintos, hay uno. * * Y como el lienzo de la página es marfil cálido, ese escenario blanco se lee * como un panel luminoso puesto a propósito, no como un recorte mal hecho. El * blanco pasa de accidente a decisión. * * Las fotos de ambiente llenan el marco y tapan el escenario, así que a ellas * no les afecta: conviven en el mismo componente sin tratamiento especial. * * NO se usan modos de fusión sobre el producto. `mix-blend-mode: multiply` * parece que funciona sobre fondos claros, pero oscurece y ensucia los grises y * los tonos claros de la propia mercancía: destruye la foto para disimular el * fondo. * * CÓMO SE USA * ----------- * .zi-media escenario base * .zi-media--large galería de ficha de producto * .zi-media--card rejilla de tienda, relacionados, categorías * .zi-media--mini sugerencias, tiras horizontales * .zi-media--cart filas de carrito, panel lateral, resumen * * La última sección de este archivo REAJUSTA los componentes que ya existen * (WooCommerce y plantillas del tema) para que hereden el mismo escenario sin * tener que reescribir cada plantilla. * * @package ZIHOUSE */ /* ══════════════════════════════════════════════════════════════════════════ 1 · ESCENARIO BASE ══════════════════════════════════════════════════════════════════════════ */ .zi-media { position: relative; display: block; overflow: hidden; background: var(--zihouse-shop-media-bg); border: 1px solid var(--zihouse-shop-media-border); border-radius: var(--zihouse-radius-sm); /* Contiene el escalado del hover sin arrastrar al resto de la página. */ isolation: isolate; /* Evita el salto de maquetación mientras la foto llega. */ aspect-ratio: var(--zi-media-ratio, 1 / 1); } /* La foto se posiciona en ABSOLUTO dentro del escenario, y no por tamaño. El motivo es una guerra de especificidad que no se puede ganar limpiamente: WooCommerce trae `.woocommerce ul.products li.product a img { height: auto }`, que encadena más selectores que cualquier regla razonable nuestra y gana. Con `height: 100%` derrotado, la imagen se quedaba a su altura natural y dejaba dos bandas blancas dentro de un escenario cuadrado. Con `position: absolute` e `inset: 0` la caja se estira entre los cuatro bordes y la altura deja de decidir nada, así que da igual quién gane. Además ignora el relleno del contenedor, con lo que tampoco hay que ir apagando los `padding` heredados uno a uno. */ .zi-media > img, .zi-media > picture, .zi-media > picture > img, .zi-media > a, .zi-media > a > img { position: absolute; inset: 0; display: block; margin: 0; max-width: none; max-height: none; /* !important, y con motivo. Posicionar en absoluto no basta para una IMAGEN. Una imagen es un elemento reemplazado, y para ellos la regla del navegador es distinta: con `height: auto` se usa su altura natural y se ignora el borde inferior, por mucho que se haya fijado `inset: 0`. Así que la altura hay que ganarla sí o sí. Y no se puede ganar por peso limpio: WooCommerce trae `.woocommerce ul.products li.product a img { height: auto }`, que encadena cuatro elementos y tres clases. Igualarlo obligaría a repetir clases o a arrastrar el contexto de la tienda dentro de un archivo que es la base del sistema y debe funcionar igual en cualquier página. Entre un truco de especificidad ilegible y un !important explicado, prefiero el segundo. */ width: 100% !important; height: 100% !important; } .zi-media img { object-fit: var(--zi-media-fit, cover); object-position: var(--zi-media-position, center); /* Sin fusión: el producto se ve tal cual se fotografió. */ mix-blend-mode: normal; transition: transform var(--zihouse-duration-slow) var(--zihouse-ease-out-quint); will-change: transform; } /* Packshot que no se puede recortar: se contiene con aire óptico en vez de rellenar. Solo cuando la plantilla lo pide expresamente. */ .zi-media--contain { --zi-media-fit: contain; } .zi-media--contain img { padding: var(--zi-media-inset, 8%); } /* ══════════════════════════════════════════════════════════════════════════ 2 · TAMAÑOS Cada uno fija su proporción. La proporción es lo que hace que una rejilla se lea como un sistema y no como fotos sueltas puestas una al lado de otra. ══════════════════════════════════════════════════════════════════════════ */ /* Galería de ficha: vertical, generosa, el producto manda. */ .zi-media--large { --zi-media-ratio: 4 / 5; } /* Rejilla de tienda y relacionados. */ .zi-media--card { --zi-media-ratio: var(--zihouse-card-media-ratio, 3 / 4); } /* Tiras horizontales de sugerencia: cuadrada, se lee de un vistazo. */ .zi-media--mini { --zi-media-ratio: 1 / 1; } /* Filas de carrito y resumen: cuadrada y pequeña. */ .zi-media--cart { --zi-media-ratio: 1 / 1; border-radius: 2px; } /* ══════════════════════════════════════════════════════════════════════════ 3 · HOVER Un solo gesto: la foto respira. Nada de sombras ni de elevación. ══════════════════════════════════════════════════════════════════════════ */ a:hover > .zi-media img, .zi-media__link:hover img, .zi-hover-parent:hover .zi-media img { transform: scale(1.025); } @media (prefers-reduced-motion: reduce) { .zi-media img { transition-duration: 1ms; } a:hover > .zi-media img, .zi-hover-parent:hover .zi-media img { transform: none; } } /* ══════════════════════════════════════════════════════════════════════════ 4 · REAJUSTE DE LO QUE YA EXISTE Mismo escenario para todos los sitios donde hoy aparece una miniatura, sin tocar plantillas. Si mañana un componente nuevo usa .zi-media directamente, esta sección se puede ir recortando. ══════════════════════════════════════════════════════════════════════════ */ /* --- Rejilla de tienda y tarjetas del tema --- */ .zihouse-product-card__media, .zihouse-category-card__media { background: var(--zihouse-shop-media-bg); border-color: var(--zihouse-shop-media-border); } /* --- Panel lateral del carrito --- */ .zihouse-drawer .cart_list li img { background: var(--zihouse-shop-media-bg); border-color: var(--zihouse-shop-media-border); object-fit: cover; } /* --- Sugerencias (panel y página de carrito) --- */ .zihouse-suggest__media { background: var(--zihouse-shop-media-bg); border-color: var(--zihouse-shop-media-border); } /* --- Carrito de bloques: filas y resumen del pedido --- */ .wc-block-cart-item__image img, .wc-block-components-order-summary-item__image img, .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img { background: var(--zihouse-shop-media-bg); border: 1px solid var(--zihouse-shop-media-border); border-radius: 2px; aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } /* --- Ficha de producto: galería de WooCommerce --- */ .woocommerce div.product div.images img, .woocommerce-product-gallery__image img { background: var(--zihouse-shop-media-bg); } .woocommerce-product-gallery__wrapper, .woocommerce-product-gallery__image { background: var(--zihouse-shop-media-bg); } /* --- Miniaturas de la galería --- */ .flex-control-thumbs li img, .woocommerce-product-gallery .flex-control-thumbs img { background: var(--zihouse-shop-media-bg); border: 1px solid var(--zihouse-shop-media-border); border-radius: 2px; aspect-ratio: 1 / 1; object-fit: cover; } /* --- El marcador de posición de WooCommerce, si aparece --- */ img.woocommerce-placeholder { background: var(--zihouse-shop-media-bg); opacity: 0.35; }