/* * La tira de miniaturas de la ficha: una sola, igual en los 16 productos. * * **El problema que cierra.** Cada familia se había pintado su propia tira y * todas usaban rejillas elásticas —`repeat(auto-fit, minmax(4rem, 1fr))` en la * preview, `repeat(4, 1fr)` en el piloto editorial, `repeat(7, 1fr)` para la * mochila, `repeat(var(--gp-grip-v5-thumb-count), 1fr)` en los agarres—. Con * rejilla elástica **el tamaño de la miniatura depende de cuántas fotos tenga * el producto**: dos fotos salían enormes ocupando el ancho entero y siete * salían diminutas. Toni lo ve el 03/09 comparando con `histrips.com` y pide lo * que hacen las tiendas grandes: miniatura de tamaño fijo, y si no caben, que * la tira se deslice. * * **Medido en `histrips.com/products/black-nasal-strips` el 03/09** con el * ancho de un iPhone (390 px), que es donde Toni lo estaba mirando: * * - miniatura de 64 × 64 px, esquinas de 8 px, fondo gris claro (#f2f2f2) * - separación de 8 px entre miniaturas, siempre la misma * - la tira es un carrusel horizontal, no una rejilla: con diez fotos se * deslizan, no se encogen * - debajo, una línea de 5 px de alto y esquinas redondas que dice por dónde * vas del carrusel * * Aquí se usan esos mismos números. La línea de progreso la mueve * `assets/js/galeria-miniaturas.js`; el HTML no la trae, la crea la JS al lado * de la tira, así que si la JS no carga solo se pierde la línea, no la tira. * * **Por qué esta hoja gana.** Se carga la última en los dos sitios —en el tema * al final de la cadena de `assets.php`, en la preview al final del ``—. * Las reglas de tamaño que tenían las hojas de familia se han borrado, no * neutralizado: la tira se define en un solo sitio y este es el sitio. * * `.gp-preview-product-thumbnails` es la preview y también el tema — * `product-v5-runtime.js` le pone esa clase a la tira nativa de WooCommerce—; * `.flex-control-thumbs` es el marcado de FlexSlider tal cual lo sirve * WooCommerce, con `li > img` en vez de `button > img`. Los dos van juntos en * cada regla para que la ficha real y la preview no se separen nunca. */ .gp-preview-product-page .gp-single-product__media .gp-preview-product-thumbnails, .gp-preview-product-page .gp-single-product__media .flex-control-thumbs { --gp-thumb-size: 4rem; --gp-thumb-gap: 0.5rem; --gp-thumb-radius: 0.5rem; --gp-thumb-ink: #101114; --gp-thumb-line: rgba(16, 17, 20, 0.14); --gp-thumb-bg: #f2f2f2; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; gap: var(--gp-thumb-gap) !important; /* Mata cualquier rejilla heredada: la tira es una fila que se desliza. */ grid-template-columns: none !important; list-style: none; margin: 0.75rem 0 0 !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0 !important; scroll-snap-type: x proximity; /* * La barra nativa se oculta porque debajo se dibuja la línea de progreso. * En iOS ya es invisible salvo mientras se desliza, así que enseñarla en * escritorio y no en móvil dejaba dos fichas distintas. */ scrollbar-width: none; width: 100% !important; } .gp-preview-product-page .gp-single-product__media .gp-preview-product-thumbnails::-webkit-scrollbar, .gp-preview-product-page .gp-single-product__media .flex-control-thumbs::-webkit-scrollbar { display: none; } .gp-preview-product-page .gp-single-product__media .gp-preview-product-thumbnails[hidden], .gp-preview-product-page .gp-single-product__media .flex-control-thumbs[hidden] { display: none !important; } /* * `flex: 0 0 ` es lo que impide que crezcan o se encojan con el número * de fotos: la miniatura mide 64 px tenga el producto dos imágenes u once. * `box-sizing: border-box` deja que el borde de la elegida pase de 1 a 2 px sin * mover ni un píxel a las de al lado. */ .gp-preview-product-page .gp-single-product__media .gp-preview-product-thumbnails > button, .gp-preview-product-page .gp-single-product__media .flex-control-thumbs > li { background: var(--gp-thumb-bg) !important; border: 1px solid var(--gp-thumb-line) !important; border-radius: var(--gp-thumb-radius) !important; box-shadow: none !important; box-sizing: border-box !important; cursor: pointer; flex: 0 0 var(--gp-thumb-size) !important; float: none !important; height: var(--gp-thumb-size) !important; margin: 0 !important; min-width: 0 !important; overflow: hidden !important; padding: 0 !important; scroll-snap-align: start; transform: none !important; transition: border-color 150ms ease !important; width: var(--gp-thumb-size) !important; } /* * `contain` y no `cover`: las fotos de producto son packshots y recortarlas por * el centro dejaba fuera justo lo que distingue una foto de otra —el pack de 3 * y el de 6 se veían idénticos en la tira—. */ .gp-preview-product-page .gp-single-product__media .gp-preview-product-thumbnails img, .gp-preview-product-page .gp-single-product__media .flex-control-thumbs img { aspect-ratio: auto !important; border: 0 !important; border-radius: calc(var(--gp-thumb-radius) - 1px) !important; box-shadow: none !important; display: block !important; height: 100% !important; margin: 0 !important; object-fit: contain !important; opacity: 1 !important; outline: 0 !important; width: 100% !important; } /* La elegida: borde de 2 px en tinta, sin aros ni sombras. */ .gp-preview-product-page .gp-single-product__media .gp-preview-product-thumbnails > button[aria-pressed="true"], .gp-preview-product-page .gp-single-product__media .flex-control-thumbs > li:has(img.flex-active) { border-color: var(--gp-thumb-ink) !important; border-width: 2px !important; box-shadow: none !important; outline: 0 !important; } .gp-preview-product-page .gp-single-product__media .gp-preview-product-thumbnails > button:hover, .gp-preview-product-page .gp-single-product__media .flex-control-thumbs > li:hover { border-color: color-mix(in srgb, var(--gp-thumb-ink) 45%, transparent) !important; } .gp-preview-product-page .gp-single-product__media .gp-preview-product-thumbnails > button:focus-visible, .gp-preview-product-page .gp-single-product__media .flex-control-thumbs > li:focus-visible { outline: 2px solid var(--gp-thumb-ink) !important; outline-offset: 2px !important; } /* * La línea de progreso del carrusel. Solo aparece cuando la tira desborda: con * tres fotos que caben enteras, una línea llena de lado a lado no dice nada. * La crea y la mueve la JS. */ .gp-preview-product-page .gp-single-product__media .gp-thumb-rail-progress { background: rgba(16, 17, 20, 0.12); border-radius: 999px; height: 5px; margin: 0.6rem 0 0; overflow: hidden; position: relative; width: 100%; } .gp-preview-product-page .gp-single-product__media .gp-thumb-rail-progress[hidden] { display: none !important; } .gp-preview-product-page .gp-single-product__media .gp-thumb-rail-progress > span { background: #101114; border-radius: inherit; display: block; height: 100%; left: 0; position: absolute; top: 0; transition: left 90ms linear, width 90ms linear; width: 100%; } @media (prefers-reduced-motion: reduce) { .gp-preview-product-page .gp-single-product__media .gp-thumb-rail-progress > span { transition: none; } }