/* ========================================================================== PLP y PDP — recuperar el ancho y la caja de imagen del diseño aprobado. Medido el 08/09 contra `Pigyfante PLP.dc.html` y `Pigyfante PDP.dc.html`: Storefront encierra el contenido en `.col-full` con `max-width:1063.98px`, y de ahí salían TODOS los sintomas: rejilla 786 en vez de 1042, tarjeta 182 en vez de 246 y galeria de ficha 324 en vez de 787. El tope se levanta SOLO en estas dos pantallas, con clases de . No hay ningun override global: cabecera, pie, carrito, checkout y Mi cuenta siguen con el ancho de Storefront. ========================================================================== */ /* --- 1 · ancho util, acotado por clase de body ---------------------------- */ .tax-product_cat .site-content > .col-full, .post-type-archive-product .site-content > .col-full, .single-product .site-content > .col-full{ max-width: 1440px; padding-left: 52px; padding-right: 52px; } @media (max-width: 1024px){ /* Storefront a~nade 19,8 px de margen lateral ADEMAS del relleno: a 390 px eso dejaba el catalogo en 318 cuando el diseno le da 358. Se anula el margen y queda el relleno de 16 px del propio diseno. */ .tax-product_cat .site-content > .col-full, .post-type-archive-product .site-content > .col-full, .single-product .site-content > .col-full{ padding-left: 16px; padding-right: 16px; margin-left: 0; margin-right: 0; width: 100%; } } /* --- 2 · tarjeta de producto: caja 4:5 y la imagen COMPLETA --------------- El prototipo usa una caja 4:5 con `cover`. Dani decidio lo contrario para el recorte: se conserva la caja 4:5 del diseno —que es lo que daba altura a la tarjeta— y la imagen entra con `contain`, centrada y sobre fondo claro. Ensenar el diseno completo del producto manda sobre llenar la caja: una portada de agenda o un cuadro no se pueden cortar. Aplica a catalogo, categoria, relacionados, busqueda y las rejillas de la Home. */ .site-main ul.products li.product a img, .site-main ul.products li.product img, .pigyhome .g-prod img, .pigyhome .swipe img{ aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: contain; object-position: center; background: var(--pf-fondo-2, #fafbfe); border-radius: var(--pf-radio-sm, 8px); } /* --- 3 · ficha: sin barra lateral ---------------------------------------- El diseno de la ficha NO lleva barra de categorias, y en QA se comia 231 px justo donde va la galeria. Se retira SOLO en producto; en categoria se queda, porque alli el diseno si la tiene. */ .single-product #secondary, .single-product .widget-area{ display: none !important; } .single-product .content-area{ width: 100%; float: none; margin-right: 0; } /* --- 4 · ficha: reparto del ancho, como en el diseno ---------------------- */ @media (min-width: 1024px){ .single-product div.product{ display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 44px; align-items: start; } .single-product div.product .woocommerce-product-gallery{ grid-column: 1; margin: 0; width: 100%; max-width: none; float: none; } .single-product div.product .summary{ grid-column: 2; margin: 0; width: 100%; float: none; } /* Descripcion y relacionados cruzan las dos columnas: en el diseno van casi a ancho completo, no encajonados en la columna de la galeria. */ .single-product div.product .woocommerce-tabs, .single-product div.product .up-sells, .single-product div.product .related{ grid-column: 1 / -1; width: 100%; } .single-product .related ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* Los bloques de categoria vivian aqui hasta el 08/09. Se retiraron al implementar la PLP desde su propio diseno: ahora los pone `plp.css`. */