/* * Complemento de la ficha de usados. Se carga DESPUÉS de * themes/woodmart-child/css/catalogo-usados.css, que es el sistema de diseño * real de Usados (tokens :root, tarjeta del listado, y también los bloques de * la ficha: precios, freshness, galería, simulador, sticky, modal, botones). * * REGLA DE ESTE ARCHIVO: acá va SOLO lo que catalogo-usados.css no define. * Nada de redefinir sus selectores. * * Antes de esta limpieza, este archivo redeclaraba 24 de sus 56 selectores * —entre ellos .pu-f-ctas, .pu-btn-detail, .pu-btn-wsp, .pu-f-brand, .pu-share * y todo el modal— y como carga después, le ganaba. El resultado era que el * CTA se pintaba con un #0033a1 suelto en vez del --pu-navy del sistema, el * botón de WhatsApp medía 164x56 en vez de 50x50, y los tokens --pu-ink/-2, * --pu-line, --pu-card y --pu-radius quedaban sombreados por copias con * valores levemente distintos. O sea: había dos implementaciones del mismo * diseño peleando, y ganaba la peor. De ahí venía buena parte de que la ficha * se viera mal. * * Los colores que fallaban contraste NO se arreglan acá: se corrigieron en el * :root de catalogo-usados.css, que es donde viven, así el listado se arregla * junto con la ficha en vez de divergir. */ /* ========================================================================== * Página como lienzo gris con tarjetas encima. * * Esto es lo que faltaba para tener paridad con la referencia, y la razón por la * que la ficha seguía viéndose plana: el sistema ya define --pu-card, * --pu-radius y --pu-shadow, y la galería ya era una tarjeta, pero el * era BLANCO. Una tarjeta blanca con sombra suave sobre fondo blanco no se lee * como tarjeta, se lee como texto suelto. La referencia pone su --bg #fafafa en * el body justamente para que cada bloque se despegue. * * Acotado a body.pu-ficha: el resto del sitio no cambia. * ========================================================================== */ body.pu-ficha { /* Mismo valor que la referencia (--bg: #fafafa). */ background: #fafafa; } /* El resumen (título, precio, CTA, specs, confianza) pasa a ser tarjeta, igual * que .sum en la referencia. Era el bloque más grande de la página y el único * sin contenedor visual. */ .pu-ficha .summary-inner { background: var(--pu-card); border-radius: var(--pu-radius); box-shadow: var(--pu-shadow); padding: 18px; } /* WoodMart aplica -20px de margen inferior con la clase `set-mb-l`, así que la * tarjeta del resumen sobresalía 20px por debajo de su columna y la primera * sección se le montaba encima (gap de -4px). Se apunta a la clase concreta para * ganarle: un `.pu-ficha .summary-inner` a secas no alcanzaba. */ .pu-ficha .summary-inner.set-mb-l { margin-bottom: 0; } /* El tema reserva 70px de padding-top en el contenedor de pestañas, pensado * para una ficha con tabs. Sumado a los 25px de margen del container dejaba un * hueco gris de 95px entre la tarjeta del resumen y la primera sección. Las * secciones ya traen su propio margen, así que este padding se anula. El * margen del container baja de 25 a 16px, que es el gap con el que la referencia * separa TODOS sus bloques (.wrap gap:16px y .sec margin-bottom:16px). * * Selector largo por lo mismo que las migas y el título: el tema lo declara en * `html body .single-product-content .product-tabs-wrapper` (0-3-2). */ html body.pu-ficha .single-product-content .product-tabs-wrapper { padding-top: 0; /* Y lo mismo por abajo. Medido: entre el borde del bloque de preguntas * frecuentes y el título "También te pueden interesar" había 196px de nada * —40 de margen de .pu-secs, 70 de padding y 70 de margen de este wrapper, * más los 16 del propio bloque—. Son cuatro espacios sumados que nadie * decidió juntos. Quedan 24+24: suficiente para que se lea el cambio de * sección, sin el bache. */ padding-bottom: 24px; /* !important porque compite contra otro !important, no por comodidad: el * style.css del tema hijo declara * html body .single-product-content .product-tabs-wrapper { * margin-bottom: 70px !important } * Nuestro selector ya le gana en especificidad (0-3-2 contra 0-2-2) —de * hecho el padding-bottom de acá arriba sí se aplica— pero contra una * declaración marcada no alcanza. Es el mismo caso que el padding del * Customizer en catalogo-usados.css. */ margin-bottom: 24px !important; } /* El margen de cierre de las secciones lo pone el último bloque (el FAQ trae * sus 16px), no el contenedor: así no se apilan dos. */ .pu-ficha .pu-secs { margin-bottom: 0; } html body.pu-ficha .single-product-content > .container { margin-bottom: 16px; } /* Mismo gap de 16px entre la galería y la tarjeta del resumen. */ .pu-ficha .product-images { margin-bottom: 16px; } /* La descripción también sobre tarjeta, para que no quede como texto flotando * sobre el gris. Mismo ancho que las demás secciones. */ .pu-ficha .woocommerce-Tabs-panel--description { max-width: 760px; margin: 0 auto 16px; padding: 20px 22px; background: var(--pu-card); border-radius: var(--pu-radius); box-shadow: var(--pu-shadow); box-sizing: border-box; } /* ========================================================================== * Rescate de los botones frente al reset de WoodMart. * * base.min.css del tema trae * :is(.btn, .button, button, [type="submit"], …) { background: var(--btn-bgcolor, #F3F3F3) } * Un :is() toma la especificidad de su argumento más específico: acá son todos * simples, así que queda en 0-1-0 — exactamente lo mismo que .pu-btn-detail de * catalogo-usados.css. Al empatar, gana el que carga después, y base.min.css va * después. En el listado no se nota porque ahí .pu-btn-detail es un , que * ese :is() no matchea; en la ficha son

real bajo el