/* ================================================================= WALON — PDP Mobile Redesign Viene del canvas de diseño "PDP Mobile Walon" (variante Final). Solo mobile: todo detrás de max-width:767px. Cero cambios a escritorio. ARQUITECTURA (v2 — reemplaza el intento anterior de restylear el markup del plugin de swatches con overrides puntuales): El sitio ya carga, además del CSS de WooCommerce/Astra, el CSS del plugin variation-swatches-woo (clases cfvsw-*) y personalizador.css (Additional CSS del Customizer, pegado a mano — carga tarde en el , con lo cual en la práctica gana casi cualquier pelea de especificidad). Tratar de "ganarle" a eso regla por regla con !important no escala: cada retoque nuevo puede volver a perder contra una regla que no vimos, y el resultado se nota (fue exactamente el bug de "Colores"/"Tallas" duplicados). Por eso acá NO se restylea el markup del plugin: se OCULTA entero (tabla de variaciones + stepper nativo de cantidad) y walon-pdp-mobile-redesign.js construye una UI paralela desde cero, con clases 100% propias (walon-pdp-*) que no existen en ningún otro lado del sitio — cero cascada que pelear, cero posibilidad de colisión con personalizador.css. Esa UI nueva no reimplementa nada: cada click/valor se reenvía al control nativo oculto (relay), así que la selección de variación, validación de stock, precio y add-to-cart siguen 100% a cargo del código que ya funciona (walon-pdp-variation-ux.php, WooCommerce, el plugin de swatches). Lo único que se sigue restyleando "in place" es lo que YA se vio bien en producción sin pelea de cascada: título, precio, rating, el aviso de envío (elementos propios del tema, no de un plugin de terceros opinado) y la galería RTWPVG (solo se oculta su thumbnail-strip duplicado, nada más). Carga vía inc/walon-pdp-mobile-redesign.php, solo en is_product(). ================================================================= */ @media (max-width: 767px) { body.walon-pdp-redesign.single-product { --wpdp-black: #000000; --wpdp-gray-700: #4a4a4a; --wpdp-gray-400: #8f8f8f; --wpdp-gray-100: #f4f5f7; --wpdp-line: #e6e6e6; --wpdp-font-head: var(--w-font-head, 'Shapiro', Arial, sans-serif); --wpdp-font-body: var(--w-font-body, 'Neusa Next Pro', sans-serif); } /* ----------------------------------------------------------- 0) #primary (Astra core, main.min.css, @media max-width:921px) le pone margin-top/bottom:1.5em al contenedor entero de la página de producto — es aire de layout genérico de Astra, no algo pensado para esta PDP. Feedback del usuario viendo el sitio real: lo quiere sacado para que la galería quede pegada arriba, sin el hueco extra antes del breadcrumb/contenido. #primary es un ID (especificidad alta, 1,0,0,0) y sin !important en la regla de Astra, así que cualquier selector nuestro con !important le gana sin pelear con la especificidad. ----------------------------------------------------------- */ /* El margin lo pide personalizador.css (regla @media max-width:921px que el usuario encontró y pegó); el padding de 25.5px (=1.5em) es DEFAULT DE ASTRA (`#primary, #secondary{padding:1.5em 0}`, inline, mismo breakpoint 921px) — no vive en ningún archivo del tema hijo, confirmado enumerando document.styleSheets en vivo. Los dos se sacan acá. */ body.walon-pdp-redesign.single-product #primary { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Ronda 8, pedido explícito del usuario: reintroducir un poco de aire arriba, pero a nivel de .ast-container (no de #primary ni de la galería) — la misma regla base de Astra trae "margin-top:20px" sin gate, se agrega acá scopeada SOLO a esta PDP en mobile. */ body.walon-pdp-redesign.single-product .ast-container { margin-top: 20px !important; } /* Encontrado en la misma auditoría (recorriendo margin/padding de CADA ancestro entre la galería/título y el body): personalizador.css le pone a .summary.entry-summary (el contenedor de título+precio+ todo lo demás) un padding-top:18px !important — es lo que de verdad separaba el título de la galería, no el margin-top del título en sí (que ya estaba en 0). Se deja el padding lateral (22px) y el de abajo tal cual — no se tocaron, no fueron parte del reclamo. */ body.walon-pdp-redesign.single-product div.summary.entry-summary { padding-top: 12px !important; } /* ----------------------------------------------------------- BUG reportado por el usuario: al hacer scroll, la barra fija de cantidad+añadir queda TAPADA por las secciones de abajo (tabs de "Descripción", etc.) — parecía un problema de z-index, pero NO lo era: se probó subir el z-index de la barra hasta el máximo posible (2147483647) y el bug seguía pasando exactamente igual. Causa real encontrada con Playwright volcando la cadena completa de ancestros y su position/z-index: ESTE MISMO div.summary.entry-summary trae "position: sticky" (no es nuestro — viene de la feature nativa de Astra "sticky summary column" para el layout de 2 columnas en desktop; en mobile no cumple ninguna función visible porque es layout de una sola columna, pero el position:sticky se sigue aplicando igual). Por qué eso rompe el z-index: "position:sticky" SIEMPRE crea su propio stacking context (a diferencia de "position:relative", que solo lo crea si tiene z-index explícito) — así que TODO lo que está adentro, incluida nuestra barra fixed con z-index:9000, queda ATRAPADO dentro del stacking context de este div. Ese z-index de 9000 solo compite contra hermanos DENTRO de ese contexto — nunca puede "escapar" para compararse contra la sección de tabs, que es un hermano posterior en el DOM (fuera de este div) y por eso se pinta encima sin importar qué tan alto pongamos el z-index de la barra. La solución no es subir el z-index (no alcanza, ya se probó) sino sacar el "position:sticky" que crea la trampa. */ body.walon-pdp-redesign.single-product div.summary.entry-summary { position: static !important; } /* Ronda 5, pedido explícito del usuario: sacar el padding LATERAL de este contenedor (título+precio+todo lo demás). La regla base vive en personalizador.css SIN @media (por eso pisa mobile y desktop por igual, confirmado grep: `body.single-product .summary.entry- summary{padding:18px 22px 22px!important}`, línea ~4849) — son 22px de aire a cada lado que en mobile ya no se quieren (el resto del layout mobile de este rediseño maneja su propio aire interno por elemento, no por el wrapper). Se deja el padding de abajo (22px) tal cual — no fue parte de este pedido, solo "los lados". */ body.walon-pdp-redesign.single-product div.summary.entry-summary { padding-left: 0 !important; padding-right: 0 !important; } /* Pedido explícito del usuario: sacar el margin-bottom:2em que WooCommerce core trae por defecto para esta misma caja (regla ".woocommerce-js div.product div.summary{margin-bottom:2em}" de woocommerce-layout.css, sin @media — pisa mobile y desktop por igual). Scopeado solo a esta PDP en mobile, como el resto del archivo — desktop se queda con el aire original de WooCommerce. */ body.walon-pdp-redesign.single-product div.summary.entry-summary { margin-bottom: 0 !important; } /* Pedido explícito del usuario: fijar el margin-top de la sección "Productos relacionados" en 2em (mismo valor que ya trae por defecto la regla ".woocommerce.single-product .related.products", sin @media — pisa mobile y desktop por igual). Se deja explícito acá, scopeado solo a esta PDP en mobile, para que quede bajo control de este archivo en vez de depender de la regla sin @media. */ body.walon-pdp-redesign.single-product .related.products { margin-top: 2em !important; } /* ----------------------------------------------------------- 1) Breadcrumb — YA se oculta en mobile por una regla existente de personalizador.css (@media max-width:768px .woocommerce- breadcrumb{display:none}). No hace falta repetirlo acá. ----------------------------------------------------------- */ /* ----------------------------------------------------------- 2) Galería RTWPVG — el slider principal + trigger de zoom se dejan tal cual (coinciden con el mockup). El thumbnail-strip propio del plugin (que duplicaría los swatches de "Colores" de más abajo) YA se oculta en mobile — no acá, sino en walon-rtwpvg-expand.php, que además construye su propia barra de navegación (.walon-rtwpvg-mnav / .walon-rtwpvg-mobilebar) para pasar entre las varias fotos de UN mismo color. No se toca nada de eso: es un sistema ya maduro (con fixes específicos de touch/Swiper documentados ahí mismo) y no es redundante con los swatches de color — pasa fotos DENTRO de un color, no entre colores. Acá solo se agrega el marco tipo card del mockup. ----------------------------------------------------------- */ /* BUG encontrado en vivo (segunda ronda, Playwright + getComputedStyle contra el sitio real): faltaba el padding:"12px 12px 0" que el mockup pone en el wrapper ALREDEDOR de la card de galería. Sin él, la card queda pegada a los bordes del viewport (edge-to-edge, sin el respiro blanco de página que sí tiene el mockup) y se percibe como un panel gris grande de ancho completo en vez de una card más chica con marco — es el "marco gris que no se quiere" que reportó el usuario: no es que sobre un marco, es que falta el inset que lo hace leer como card en vez de panel a todo el ancho. .rtwpvg-images es el wrapper de Woo/RTWPVG un nivel arriba de .rtwpvg-wrapper > .rtwpvg-container (ver cadena de DOM real confirmada con Playwright) — es estático desde la carga, así que no choca con la advertencia de walon-rtwpvg-expand.php sobre cambiar alturas DESPUÉS de que Swiper mide. */ /* Feedback directo del usuario viendo esto ya en vivo (no en el mockup): la card se sentía "más grande/más ancha" de lo esperado — 20px extra de padding lateral (32px en total contando el propio inset de Astra) la achica y le da más aire blanco alrededor, sin tocar el ancho real de la foto (que sigue siendo 100% del contenedor, autoHeight). */ /* Ronda 4: sin aire arriba/abajo — solo el respiro lateral de 20px. Ronda 5: se agregó 10px de padding-top, manteniendo los 20px laterales. Ronda 6: pedido explícito del usuario (confirmado con CSS literal, no ambiguo esta vez) — la galería va edge-to-edge, sin padding en ningún lado, para que la foto ocupe todo el ancho disponible. Esto desalinea el borde de la foto respecto al inset de 20px de título/ precio/etc. (que sigue viniendo del padding lateral ambiente de #content .ast-container, no tocado acá) — es intencional: imagen a todo el ancho, contenido de texto con su propio respiro. */ body.walon-pdp-redesign.single-product .rtwpvg-images { padding: 0px 0px 0; } /* El plugin RTWPVG trae su propio margin-bottom vía la variable CSS --rtwpvg-gallery-margin-bottom (0px por default acá, así que hoy no suma nada) — se fuerza explícito a 0 igual para no depender de que esa variable se quede en 0 para siempre. */ body.walon-pdp-redesign.single-product .rtwpvg-images { margin-bottom: 0 !important; } /* Feedback directo del usuario: no quiere el borde gris alrededor de la card (aunque el mockup sí lo tiene) — se saca. */ body.walon-pdp-redesign.single-product .rtwpvg-container { border: 0 !important; } /* El mockup usa una card de alto fijo (300px) con la foto recortada a "cover"; la galería real, al ser fotos cuadradas 1000x1000 con autoHeight:true, se estira casi cuadrada (~373-390px acá). Se fija la altura del wrapper ANTES de que Swiper mida por primera vez (esto es una regla CSS estática desde la carga, no un toggle en caliente) — walon-rtwpvg-expand.php advierte de romper cosas cuando el alto se cambia DESPUÉS de que Swiper ya midió; acá no aplica ese caso. */ /* El mockup usa un recorte fijo de 300px con object-fit:cover sobre UNA foto elegida a propósito para verse bien recortada. Se probó forzar lo mismo acá (primero con height:100% en cadena — no funcionaba, un ancestro de Swiper con autoHeight queda en "auto" y rompe la cadena de porcentajes — después con px fijo) pero el catálogo real tiene fotos con composición distinta, no todas centradas igual: forzar el mismo recorte en todas corta el producto de forma inconsistente ("imagen incompleta", fondo gris del pack-shot descentrado). Se deja la altura 100% natural del plugin (autoHeight real, sin overrides) — el mismo comportamiento que ya funcionaba bien antes de este rediseño. Si se quiere igual proporción que el mockup, hay que revisar fotos reales del catálogo primero para elegir un recorte que no corte productos. */ /* Chips "Color: X" / "Talla: X" (walon-pdp-variation-ux.php) — el mockup no los tiene, y ahora son redundantes con el label propio ("Elige tu color — X") + el swatch resaltado. BUG encontrado en vivo (verificado con Playwright/mobile real): personalizador.css tiene "body.single-product .summary.entry-summary .walon-selected-summary{display:flex!important}" — 4 clases de especificidad. La regla de acá tenía solo 3 (le faltaba el prefijo "div.summary.entry-summary" que sí llevan las demás reglas de este archivo) y perdía el empate, así que el chip "Color: X" se seguía viendo debajo de la grilla de tallas, duplicando la info. */ body.walon-pdp-redesign.single-product div.summary.entry-summary .walon-selected-summary { display: none !important; } /* ----------------------------------------------------------- 3) Título / precio / rating — markup propio del tema/Woo, sin pelea de cascada reportada, se deja el restyle directo. ----------------------------------------------------------- */ /* personalizador.css trae reglas propias para .product_title y p.price en este mismo rango de ancho (@media max-width:921px y max-width:480px, todas con !important, misma especificidad que antes de agregar .single-product acá) — con el boost de especificidad de más arriba estas ganan, pero se deja !important también para no depender del orden de carga entre hojas. */ /* Feedback directo del usuario (ronda 4): sin margin-top (antes 16px, pegado a la card ahora que la card tampoco tiene padding- bottom) y letra más chica (antes 20px, "lo siento muy grande" viéndolo en su propio celular — Shapiro es una fuente bien pesada/condensada, a 20px real en pantalla lee más grande que en el mockup). */ /* Ronda 5: seguía viéndose "muy grande" a 17px/18px (título/precio). Bajado un escalón más y acercado el tamaño de los dos (15px/16px, antes 17px/18px) para que lean como un solo bloque compacto en vez de dos líneas de tamaño dispar — la jerarquía título→precio ahora la da el peso/color (precio en negro 700 vs. título 400), no la diferencia de tamaño. */ body.walon-pdp-redesign.single-product div.summary.entry-summary .product_title, body.walon-pdp-redesign.single-product div.summary.entry-summary .product_title.entry-title { font-family: var(--wpdp-font-head) !important; font-weight: 400 !important; font-size: 15px !important; line-height: 1.25 !important; color: var(--wpdp-black) !important; text-transform: uppercase !important; margin: 0 !important; } body.walon-pdp-redesign.single-product div.summary.entry-summary .woocommerce-product-rating { display: flex !important; align-items: center !important; gap: 6px !important; margin: 8px 0 0 !important; } body.walon-pdp-redesign.single-product div.summary.entry-summary .woocommerce-product-rating .star-rating { font-size: 12px !important; } body.walon-pdp-redesign.single-product div.summary.entry-summary .woocommerce-product-rating .woocommerce-review-link, body.walon-pdp-redesign.single-product div.summary.entry-summary .woocommerce-product-rating .count { font-size: 11px !important; color: var(--wpdp-gray-400) !important; text-decoration: none !important; } /* Feedback directo del usuario (ronda 4): "igual lo siento muy grande" — 22px bajado a 18px. Ronda 5: bajado otro escalón a 16px (junto con el título a 15px, ver nota de arriba) — ahora el peso 700 + negro puro es lo que hace de precio "el elemento fuerte" del bloque, no el tamaño. */ body.walon-pdp-redesign.single-product div.summary.entry-summary > p.price { font-family: var(--wpdp-font-head) !important; font-weight: 700 !important; font-size: 16px !important; margin: 8px 0 0 !important; display: flex !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap !important; } /* BUG reportado por el usuario en un producto CON descuento (del+ins+ badge): "los precios se ven de otros tamaños, no se alinean". Causa encontrada: personalizador.css trae, SIN gate de .walon-pdp-redesign, un bloque @media(max-width:921px) que fuerza font-size:24px!important directo sobre los SPANS anidados (".woocommerce-Price-amount" y "bdi" dentro de ins, y el span directo cuando NO hay descuento) — selectores más profundos que nuestro simple "p.price{font-size:16px}" de arriba, así que ganan por especificidad en esos spans puntuales aunque p.price en sí ya mida 16px (confirmado con Playwright: getComputedStyle de p.price daba 16px, pero el texto visible vive en estos spans hijos, que heredaban el 16px SOLO cuando ninguna otra regla los tocaba directo — acá sí hay una). Antes solo se había cubierto el caso "del" (precio tachado); faltaba cubrir "ins" (precio con descuento) y el caso sin descuento (span directo bajo p.price, sin del/ins). Se agrega acá, con la misma clase extra ".walon-pdp-redesign" que ya le gana a personalizador.css en el resto del archivo. */ body.walon-pdp-redesign.single-product div.summary.entry-summary > p.price .woocommerce-Price-amount, body.walon-pdp-redesign.single-product div.summary.entry-summary > p.price .woocommerce-Price-amount bdi { font-size: 16px !important; } /* Ronda 7: el símbolo "S/" seguía en otro tamaño (26px en ins, 24px en del) — es un span propio, ".woocommerce-Price-currencySymbol", anidado DENTRO de bdi, y personalizador.css lo apunta directo con su propio selector (no alcanza con cubrir bdi: el currencySymbol no hereda porque hay una regla más específica pisándolo a él también). Mismo patrón que el bug de "del bdi" de la ronda anterior — cada span anidado necesita su propio selector explícito, cubrir el padre no alcanza si personalizador.css también apunta al hijo directo. */ body.walon-pdp-redesign.single-product div.summary.entry-summary > p.price .woocommerce-Price-amount .woocommerce-Price-currencySymbol { font-size: 16px !important; } body.walon-pdp-redesign.single-product div.summary.entry-summary > p.price del { font-size: 12px !important; font-family: var(--wpdp-font-body) !important; color: var(--wpdp-gray-400) !important; opacity: 1 !important; order: 2 !important; } /* Más específica que la regla general de arriba (agrega "del"), así que sobre el precio tachado gana esta: 12px, no 16px. OJO especificidad: "del bdi" (sin la clase .woocommerce-Price-amount en el selector) tiene MENOS clases que la regla general de arriba (".woocommerce-Price-amount bdi") — a pesar de ir después en el archivo, pierde el empate por conteo de clases (CSS compara clases antes que orden de aparición), así que el "bdi" quedaba en 16px en vez de 12px (bug encontrado con Playwright inyectando el HTML real de un producto con descuento). Se agrega la variante con la clase ".woocommerce-Price-amount" en el selector para igualar el conteo de clases y ganar por el elemento "del" extra. */ body.walon-pdp-redesign.single-product div.summary.entry-summary > p.price del .woocommerce-Price-amount, body.walon-pdp-redesign.single-product div.summary.entry-summary > p.price del bdi, body.walon-pdp-redesign.single-product div.summary.entry-summary > p.price del .woocommerce-Price-amount bdi { text-decoration: line-through !important; color: var(--wpdp-gray-400) !important; font-size: 12px !important; font-weight: 400 !important; } /* Ronda 7: mismo símbolo "S/" pero dentro del precio tachado — necesita su propio selector (ver nota de arriba) con "del" para ganarle tanto a personalizador.css (24px) como a nuestra propia regla general de currencySymbol de arriba (16px). */ body.walon-pdp-redesign.single-product div.summary.entry-summary > p.price del .woocommerce-Price-amount .woocommerce-Price-currencySymbol { font-size: 12px !important; font-weight: 400 !important; color: var(--wpdp-gray-400) !important; } body.walon-pdp-redesign.single-product div.summary.entry-summary > p.price ins { text-decoration: none !important; order: 1 !important; } /* Badge "-XX%": inyectado por el JS solo cuando hay del+ins (precio rebajado). Sin JS, simplemente no aparece. */ body.walon-pdp-redesign.single-product div.summary.entry-summary > p.price .walon-pdp-discount-badge { order: 3 !important; font-size: 11px !important; font-weight: 700 !important; color: #c0182c !important; font-family: var(--wpdp-font-body) !important; } /* Feedback del usuario en vivo: "no deja mucho margen arriba y abajo las letras del nombre del producto" — en productos SIN reseñas (.woocommerce-product-rating no se imprime, como en este producto) el precio queda pegado al título con solo 8px, porque ese 8px de la regla de arriba estaba pensado como el hueco título→rating (y rating→precio), no como el hueco título→precio directo cuando el rating no existe. Selector de adyacencia: solo pisa el caso en que el precio es hermano inmediato del título (sin rating en medio). Va DESPUÉS de la regla general de p.price a propósito: mismo nivel de especificidad (4 clases + selector de precio), así que en el empate de !important gana quien está más abajo en la cascada. */ /* Ronda 4: bajado de 16px a 10px junto con el resto de los recortes de aire de esta sección (título sin margin-top, fuentes más chicas) — 16px se sentía igual de grande que lo demás. Ronda 5: bajado a 8px junto con el paso de título/precio a 15px/16px — con letras más chicas, 10px de por medio se sentía desproporcionado (los dos leían como bloques separados en vez de un título+precio compacto). */ body.walon-pdp-redesign.single-product div.summary.entry-summary .product_title + p.price { margin-top: 8px !important; } /* ----------------------------------------------------------- 4) Aviso de envío 48h (walon-tyc-below-price.php). Pedido del usuario: moverlo para que quede DEBAJO de "Elige tu color" y "Tallas" (antes iba pegado al precio, arriba de los pickers). El movimiento real en el DOM lo hace walon-pdp-mobile-redesign.js (moveShippingBannerBelowPickers) — acá solo se mantiene el mismo estilo visual de card con borde, sin importar en qué posición del documento termine. ----------------------------------------------------------- */ body.walon-pdp-redesign.single-product div.summary.entry-summary .seg-hero-banner#walon-tyc-block { width: auto !important; margin: 12px 0 0 !important; border: 1px solid var(--wpdp-line) !important; border-radius: 0 !important; padding: 9px 11px !important; background: none !important; } body.walon-pdp-redesign.single-product div.summary.entry-summary .seg-hero-banner#walon-tyc-block .seg-message { margin: 0 !important; font-size: 11.5px !important; line-height: 1.4 !important; color: var(--wpdp-gray-700) !important; font-family: var(--wpdp-font-body) !important; } body.walon-pdp-redesign.single-product div.summary.entry-summary .seg-hero-banner#walon-tyc-block .seg-message strong { color: var(--wpdp-black) !important; } /* ----------------------------------------------------------- 4b) SKU / Categorías / Etiqueta (product_meta, markup nativo de WooCommerce). Pedido del usuario: ocultar "Etiqueta" (no aporta nada de cara al cliente) y afinar el resto para que combine con la escala compacta del resto de este rediseño — la regla base de personalizador.css (sin @media, aplica también a esto) ya lo separaba en líneas con label en negrita, así que no hacía falta rehacer la estructura, solo achicar un poco la letra y el espaciado para que no se sienta un cuerpo de texto aparte. ----------------------------------------------------------- */ body.walon-pdp-redesign.single-product div.summary.entry-summary .product_meta { margin: 16px 0 0 !important; padding-top: 14px !important; border-top: 1px solid var(--wpdp-line) !important; font-family: var(--wpdp-font-body) !important; font-size: 12px !important; line-height: 1.6 !important; color: var(--wpdp-gray-700) !important; } body.walon-pdp-redesign.single-product div.summary.entry-summary .product_meta > span { display: block !important; } body.walon-pdp-redesign.single-product div.summary.entry-summary .product_meta a { color: var(--wpdp-gray-700) !important; } /* "Etiqueta: arquero" etc. — pedido explícito del usuario, no es información relevante para el cliente. */ body.walon-pdp-redesign.single-product div.summary.entry-summary .product_meta .tagged_as { display: none !important; } /* ----------------------------------------------------------- 5) Tabla nativa de variaciones (colores/tallas, plugin variation-swatches-woo) — oculta por completo. Sigue en el DOM y sigue funcionando (el JS le reenvía los clicks), solo no se ve. Visualmente hidden, no display:none, por si el plugin revisa visibilidad/tamaño para algo interno (tooltips, etc.). ----------------------------------------------------------- */ body.walon-pdp-redesign.single-product form.variations_form table.variations { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: 0 !important; } /* ----------------------------------------------------------- 6) UI propia — construida por walon-pdp-mobile-redesign.js. Todas las clases empiezan con walon-pdp-: no existen en ningún otro CSS del sitio (plugin, Astra, personalizador.css), así que no hay especificidad que pelear. ----------------------------------------------------------- */ /* Márgenes tal cual el mockup: 16px arriba de "Elige tu color", 22px arriba de "Tallas" — no un valor parejo inventado. */ body.walon-pdp-redesign.single-product .walon-pdp-color-picker { margin-top: 16px; } body.walon-pdp-redesign.single-product .walon-pdp-size-picker { margin-top: 22px; } /* BUG encontrado en vivo: esta regla compartida traía justify-content:space-between para los DOS pickers por igual. Le sirve a "Tallas" (label a la izquierda, botón "Guía de tallas" pegado al borde derecho — así lo pide el mockup), pero rompía "Elige tu color": sin un tercer elemento a la derecha, el space-between empujaba "— {color}" hasta el borde opuesto del picker en vez de dejarlo pegado al label ("Elige tu color — Azulino/Negro", todo junto, como un solo string en el mockup). Por eso el space-between se mueve a la regla específica de size-picker de más abajo, y acá queda solo flex-start (default). */ body.walon-pdp-redesign.single-product .walon-pdp-picker-head { display: flex; align-items: center; gap: 10px; } /* Color: cero gap del flex — el espacio antes de "— Nombre" ya lo dan el "::before" (em dash) + el margin-left de picker-selected; sumarle además el gap:10px de arriba abría un hueco de más entre el label y el nombre del color, distinto al string compacto del mockup. */ body.walon-pdp-redesign.single-product .walon-pdp-color-picker .walon-pdp-picker-head { gap: 0; } body.walon-pdp-redesign.single-product .walon-pdp-size-picker .walon-pdp-picker-head { justify-content: space-between; } body.walon-pdp-redesign.single-product .walon-pdp-picker-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--wpdp-black); font-family: var(--wpdp-font-body); } body.walon-pdp-redesign.single-product .walon-pdp-picker-selected { font-size: 11px; font-weight: 400; color: var(--wpdp-gray-700); font-family: var(--wpdp-font-body); margin-left: 6px; } body.walon-pdp-redesign.single-product .walon-pdp-picker-selected:empty { display: none; } body.walon-pdp-redesign.single-product .walon-pdp-picker-selected::before { content: "— "; } /* Es el botón REAL (.walon-sg-trigger, movido acá por el JS, no clonado) — su ícono SVG lo sigue estilando personalizador.css vía ".walon-sg-trigger .walon-sg-ico svg". Acá solo se ajusta que no ocupe todo el ancho dentro del picker-head; nada de `all:unset` porque justamente necesitamos que conserve su estilo de base. */ body.walon-pdp-redesign.single-product .walon-pdp-sg-btn.walon-sg-trigger { flex-shrink: 0; margin-left: 10px; } body.walon-pdp-redesign.single-product .walon-pdp-color-row { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 2px; } /* 58x58, cuadrado, sin padding entre el borde y la foto — tal cual el mockup (no los 44px circulares que había puesto antes, copiando por error la forma de los swatches nativos cfvsw en vez de la del diseño aprobado). */ /* BUG encontrado en vivo (segunda ronda): personalizador.css línea ~506 trae "a, button, img{border:none!important}" — un reset GLOBAL con !important que aplica a cualquier