de WooCommerce, así que esa clase se queda SOLO en el . Por eso aquí nunca se escribe `body… .woocommerce …` (sería pedirle a un elemento que sea descendiente de sí mismo: no casa con nada). Se escribe `body.woocommerce div.product …` o, más corto, `.woocommerce div.product …` —que ya resuelve a «body.woocommerce y dentro un div.product»—. Este error exacto costó una versión en el tema hermano. Esta hoja se encola con prioridad 30, después de las de WooCommerce, para ganarle por orden de aparición sin llenar todo de !important. Índice 1. Retícula del catálogo 2. Tarjeta de producto 3. Cabecera del catálogo 4. Ficha de producto — retícula 5. Galería en mosaico 6. Galería en carrusel y miniaturas 7. Ampliación (PhotoSwipe) 8. Resumen de la ficha 9. Pestañas y relacionados 10. Botones y avisos nativos 11. Migas y paginación 12. Modo cotización 13. Adaptación a pantalla y preferencias del sistema ========================================================================== */ /* -------------------------------------------------------------------------- 1. Retícula del catálogo -------------------------------------------------------------------------- */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid; grid-template-columns: repeat(var(--pb-woo-cols, 3), 1fr); gap: 26px; margin: 0 0 34px; padding: 0; list-style: none; } /* WooCommerce limpia flotantes con pseudoelementos; con retícula estorban porque cuentan como celdas. */ .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { /* WooCommerce reparte anchos por porcentaje y flotantes: se desactiva todo eso para que mande la retícula. */ width: 100% !important; margin: 0 !important; float: none !important; clear: none !important; display: flex; flex-direction: column; background: var(--pb-content-bg, #fff); border: 1px solid var(--pb-border, #ccc); border-radius: var(--pb-card-radius, 3px); overflow: hidden; transition: transform .18s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), border-color .16s ease; } @media (hover: hover) and (pointer: fine) { .woocommerce ul.products li.product:hover { transform: translateY(-2px); border-color: rgba(var(--pb-primary-rgb, 174, 40, 46), .45); box-shadow: 0 8px 22px rgba(var(--pb-text-rgb, 51, 51, 51), .1); } } .woocommerce ul.products li.product:focus-within { border-color: rgba(var(--pb-primary-rgb, 174, 40, 46), .45); } /* -------------------------------------------------------------------------- 2. Tarjeta de producto -------------------------------------------------------------------------- .pb-product-media y .pb-product-body son envoltorios del tema, abiertos y cerrados por hooks en inc/woocommerce.php. */ .pb-product-media { position: relative; overflow: hidden; background: var(--pb-band, rgba(51, 51, 51, .05)); } .woocommerce ul.products li.product a img { width: 100%; margin: 0; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } @media (hover: hover) and (pointer: fine) { .woocommerce ul.products li.product:hover a img { transform: scale(1.04); } } .woocommerce span.onsale { top: 10px; left: 10px; right: auto; margin: 0; min-width: 0; min-height: 0; padding: 6px 11px; background: var(--pb-primary, #ae282e); color: var(--pb-content-bg, #fff); border-radius: var(--pb-btn-radius, 3px); font-size: var(--pb-fs-small, 13px); font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; } .pb-product-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 18px 20px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0 0 8px; padding: 0; font-family: var(--pb-font-heading, Georgia, serif); font-size: var(--pb-fs-h5, 16px); font-weight: var(--pb-heading-weight, 700); line-height: 1.3; color: var(--pb-text, #333); transition: color .16s ease; } @media (hover: hover) and (pointer: fine) { .woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--pb-primary, #ae282e); } } .woocommerce ul.products li.product .price { margin: 0 0 12px; color: var(--pb-muted, #666); font-size: calc(var(--pb-fs-base, 16px) * .94); } .woocommerce ul.products li.product .price del { opacity: .6; } .woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 700; color: var(--pb-text, #333); } .woocommerce ul.products li.product .star-rating { margin: 0 0 8px; font-size: var(--pb-fs-small, 13px); color: var(--pb-primary, #ae282e); } /* El CTA siempre al fondo de la tarjeta, midan lo que midan los títulos. */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { margin-top: auto; border-radius: var(--pb-btn-radius, 3px); } .woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; } /* -------------------------------------------------------------------------- 3. Cabecera del catálogo -------------------------------------------------------------------------- */ .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 22px; color: var(--pb-muted, #666); font-size: calc(var(--pb-fs-base, 16px) * .92); } .woocommerce .woocommerce-result-count { line-height: 42px; } .woocommerce .woocommerce-ordering select { width: auto; min-width: 220px; padding: 9px 12px; } .woocommerce-products-header { margin-bottom: 4px; } .woocommerce-products-header__title, .term-description { margin-bottom: 20px; } .term-description { max-width: 72ch; color: var(--pb-muted, #666); font-size: var(--pb-fs-h5, 16px); line-height: 1.65; } .woocommerce .woocommerce-no-products-found, .woocommerce-notices-wrapper:empty { margin: 0; } /* -------------------------------------------------------------------------- 4. Ficha de producto — retícula -------------------------------------------------------------------------- Retícula CSS en lugar de los flotantes de WooCommerce: así el reparto configurado (65/35 por defecto) es exactamente ese, y la separación es espacio real y no un porcentaje robado a las columnas. Por eso los tokens vienen en unidades fr desde inc/customizer-css.php. */ .woocommerce div.product { position: relative; display: grid; /* La separación parte del gap de galería para que un solo ajuste mueva toda la respiración de la ficha, con un mínimo cómodo. */ grid-template-columns: var(--pb-woo-img-w, 65fr) var(--pb-woo-sum-w, 35fr); column-gap: calc(var(--pb-woo-gap, 10px) + 24px); align-items: start; padding: 30px; background: var(--pb-content-bg, #fff); border: 1px solid var(--pb-border, #ccc); border-radius: var(--pb-card-radius, 3px); } /* Pestañas, relacionados y ventas cruzadas cruzan las dos columnas. */ .woocommerce div.product > .woocommerce-tabs, .woocommerce div.product > .related, .woocommerce div.product > .upsells, .woocommerce div.product > .woocommerce-product-gallery + .summary + * { grid-column: 1 / -1; } .woocommerce div.product > span.onsale { position: absolute; z-index: 4; } /* Las anchuras llevan !important porque WooCommerce reparte 48/48 con la misma especificidad. Cargar en prioridad 30 ya lo resuelve, pero un plugin de caché que reordene las hojas volvería a romperlo. */ .woocommerce div.product div.images, .woocommerce div.product div.images.woocommerce-product-gallery, .woocommerce div.product div.summary { width: 100% !important; float: none !important; clear: none !important; margin-bottom: 0 !important; position: relative; min-width: 0; } /* -------------------------------------------------------------------------- 5. Galería en mosaico -------------------------------------------------------------------------- Modo por defecto. inc/woocommerce.php sirve aquí woocommerce_single —fotos de verdad— en lugar del recorte de 100x100 de las miniaturas, y apaga flexslider por completo. Multicolumna en vez de retícula: con alturas variables una retícula deja huecos, porque todas las celdas de una fila comparten alto. La multicolumna empaqueta cada columna por su cuenta. La primera foto cruza las dos. OJO: --pb-woo-ratio NO se aplica aquí. En mosaico manda la proporción real de cada fotografía; forzar un recorte cuadrado fue justo lo que se vino a corregir. El token solo actúa en el carrusel (§6). */ .woocommerce div.product .woocommerce-product-gallery__wrapper { display: block; column-count: 2; column-gap: var(--pb-woo-gap, 10px); margin: 0; background: none; border-radius: 0; overflow: visible; } /* * WooCommerce trae en su propia hoja, para su rejilla de miniaturas: * * .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) * { width: 25%; display: inline-block; } * * Es más específica que cualquier selector corto del tema, así que las fotos * secundarias salían al 25 % y en línea. Hay que igualarle la especificidad y * forzar el ancho. El selector va por descendencia genérica (`> *`) para no * depender de qué etiqueta use la versión de WooCommerce instalada. */ body:not(.pb-woo-gallery-carousel) div.product div.images .woocommerce-product-gallery__wrapper > *, body:not(.pb-woo-gallery-carousel) div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+2) { width: 100% !important; max-width: 100% !important; display: block !important; float: none !important; clear: none !important; margin: 0 0 var(--pb-woo-gap, 10px) !important; padding: 0 !important; position: relative; break-inside: avoid; page-break-inside: avoid; overflow: hidden; border-radius: var(--pb-card-radius, 3px); background: var(--pb-band, rgba(51, 51, 51, .05)); } body:not(.pb-woo-gallery-carousel) div.product div.images .woocommerce-product-gallery__wrapper > * > a, body:not(.pb-woo-gallery-carousel) div.product div.images .woocommerce-product-gallery__wrapper > * > a > img, body:not(.pb-woo-gallery-carousel) div.product div.images .woocommerce-product-gallery__wrapper > * > img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; float: none !important; } /* * WooCommerce arranca la galería en opacity:0 y la revela por JS con una * transición. Sin carrusel esa transición se queda colgada en su primer * fotograma y la galería no llega a verse nunca, aunque el estilo en línea * diga opacity:1. Se fuerza la opacidad y se anula la transición. */ body:not(.pb-woo-gallery-carousel) div.product div.images.woocommerce-product-gallery { opacity: 1 !important; transition: none !important; } .woocommerce div.product .woocommerce-product-gallery__image a { display: block; } /* Ancho el de la columna, alto el que pida la propia fotografía. */ .woocommerce div.product .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; transition: transform .3s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } @media (hover: hover) and (pointer: fine) { .woocommerce div.product .woocommerce-product-gallery__image:hover img { transform: scale(1.03); } } /* La primera foto cruza las dos columnas: es la que vende. */ .woocommerce div.product .woocommerce-product-gallery__image:first-child { column-span: all; margin-bottom: var(--pb-woo-gap, 10px); } /* Disparador de la ampliación. */ .woocommerce div.product .woocommerce-product-gallery__trigger { top: 14px; right: 14px; z-index: 6; background: var(--pb-content-bg, #fff); box-shadow: 0 2px 10px rgba(var(--pb-text-rgb, 51, 51, 51), .18); transition: transform .12s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } .woocommerce div.product .woocommerce-product-gallery__trigger:active { transform: scale(0.94); transition-duration: .1s; } /* -------------------------------------------------------------------------- 6. Galería en carrusel y miniaturas -------------------------------------------------------------------------- Modo alternativo (body.pb-woo-gallery-carousel). Aquí sí manda --pb-woo-ratio: todas las diapositivas miden lo mismo para que el carrusel no dé saltos de alto al pasar de una foto a otra. */ body.pb-woo-gallery-carousel div.product .woocommerce-product-gallery__wrapper { display: block; column-count: 1; border-radius: var(--pb-card-radius, 3px); overflow: hidden; background: var(--pb-band, rgba(51, 51, 51, .05)); } body.pb-woo-gallery-carousel div.product .woocommerce-product-gallery__image { border-radius: 0; } body.pb-woo-gallery-carousel div.product .woocommerce-product-gallery__image:first-child { column-span: none; margin-bottom: 0; } body.pb-woo-gallery-carousel div.product .woocommerce-product-gallery__image img { aspect-ratio: var(--pb-woo-ratio, 1 / 1) !important; object-fit: cover !important; height: auto !important; } .woocommerce div.product .flex-direction-nav { list-style: none; margin: 0; padding: 0; } .woocommerce div.product .flex-direction-nav a { position: absolute; top: 50%; z-index: 5; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: var(--pb-content-bg, #fff); box-shadow: 0 2px 10px rgba(var(--pb-text-rgb, 51, 51, 51), .2); text-indent: -9999px; overflow: hidden; opacity: 0; transition: opacity .18s ease, transform .12s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } .woocommerce div.product .flex-direction-nav a::before { content: ""; position: absolute; top: 13px; left: 14px; width: 10px; height: 10px; border-right: 2px solid var(--pb-text, #333); border-bottom: 2px solid var(--pb-text, #333); transform: rotate(-45deg); } .woocommerce div.product .flex-direction-nav .flex-prev { left: 14px; } .woocommerce div.product .flex-direction-nav .flex-next { right: 14px; } .woocommerce div.product .flex-direction-nav .flex-prev::before { left: 16px; transform: rotate(135deg); } .woocommerce div.product .flex-direction-nav a:active { transform: scale(0.92); transition-duration: .1s; } /* Las flechas aparecen al acercarse; en táctil no hay hover, así que ahí se quedan siempre visibles. */ @media (hover: hover) and (pointer: fine) { .woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; } } @media (hover: none) { .woocommerce div.product .flex-direction-nav a { opacity: 1; } } .woocommerce div.product .flex-direction-nav a:focus-visible { opacity: 1; } .woocommerce div.product .flex-direction-nav .flex-disabled { opacity: 0 !important; pointer-events: none; } /* Miniaturas (solo en carrusel y si el ajuste las pide; si no, inc/customizer-css.php las oculta). */ .woocommerce div.product .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } .woocommerce div.product .flex-control-thumbs li { width: 62px; margin: 0; float: none; } .woocommerce div.product .flex-control-thumbs img { width: 62px; height: 62px; aspect-ratio: 1 / 1; object-fit: cover; border: 2px solid transparent; border-radius: var(--pb-card-radius, 3px); opacity: .55; cursor: pointer; transition: opacity .18s ease, border-color .16s ease; } @media (hover: hover) and (pointer: fine) { .woocommerce div.product .flex-control-thumbs img:hover { opacity: .85; } } .woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--pb-primary, #ae282e); } /* -------------------------------------------------------------------------- 7. Ampliación (PhotoSwipe) -------------------------------------------------------------------------- PhotoSwipe anima la opacidad de .pswp__bg de 0 a 1, así que la transparencia tiene que ir dentro del propio color —y ahí es donde ya viene resuelta desde el Personalizador, color + alfa, en --pb-lightbox-bg—. */ .pswp__bg { background: var(--pb-lightbox-bg, rgba(51, 51, 51, .9)) !important; } .pswp__caption__center { font-family: var(--pb-font-body, sans-serif); text-align: center; } .pswp__button { opacity: .85; } @media (hover: hover) and (pointer: fine) { .pswp__button:hover { opacity: 1; } } /* -------------------------------------------------------------------------- 8. Resumen de la ficha -------------------------------------------------------------------------- */ .woocommerce div.product .product_title { margin-bottom: 10px; font-size: var(--pb-fs-h4, 20px); line-height: 1.22; color: var(--pb-text, #333); /* En una columna estrecha un serif grande parte por sílabas. */ overflow-wrap: break-word; hyphens: auto; } .woocommerce div.product .product_title::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 12px; background: var(--pb-primary, #ae282e); } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--pb-text, #333); font-size: var(--pb-fs-h4, 20px); font-weight: 700; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--pb-muted, #666); font-size: calc(var(--pb-fs-base, 16px) * .92); line-height: 1.6; } /* Meta técnica (SKU, categorías): gris de marca, como el resto de etiquetas. */ .woocommerce div.product .product_meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pb-border, #ccc); font-size: var(--pb-fs-small, 13px); color: var(--pb-accent, #53565a); } .woocommerce div.product form.cart { margin-bottom: 18px; } .woocommerce div.product form.cart .quantity input.qty { width: 72px; text-align: center; } .woocommerce div.product .woocommerce-variation-add-to-cart, .woocommerce div.product table.variations { margin-bottom: 12px; } /* El botón del plugin venía en tamaño grande: en una columna estrecha resultaba desproporcionado frente al resto del resumen. */ .woocommerce div.product div.summary .pbe-single-cta { padding: 16px; } .woocommerce div.product div.summary .pbe-single-cta .pbe-btn { padding: 11px 16px; gap: 7px; font-size: calc(var(--pb-fs-base, 16px) * .9); line-height: 1.25; text-align: center; white-space: normal; } .woocommerce div.product div.summary .pbe-single-cta__note { margin-top: 10px; font-size: var(--pb-fs-small, 13px); line-height: 1.45; } .woocommerce div.product div.summary .button { font-size: calc(var(--pb-fs-base, 16px) * .9); text-align: center; white-space: normal; } /* -------------------------------------------------------------------------- 9. Pestañas y relacionados -------------------------------------------------------------------------- */ .woocommerce div.product .woocommerce-tabs ul.tabs { margin: 34px 0 0; padding: 0; border-bottom: 1px solid var(--pb-border, #ccc); } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0 22px 0 0; padding: 0; background: transparent; border: 0; border-radius: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 12px 0; border-bottom: 2px solid transparent; color: var(--pb-muted, #666); font-size: calc(var(--pb-fs-base, 16px) * .9); font-weight: 600; transition: color .16s ease, border-color .16s ease; } @media (hover: hover) and (pointer: fine) { .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--pb-text, #333); text-decoration: none; } } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--pb-text, #333); border-bottom-color: var(--pb-primary, #ae282e); } .woocommerce div.product .woocommerce-tabs .panel { font-size: calc(var(--pb-fs-base, 16px) * .96); } .woocommerce div.product .woocommerce-tabs .panel > h2:first-child { font-size: var(--pb-fs-h4, 20px); } .woocommerce .related > h2, .woocommerce .upsells > h2 { margin: 44px 0 22px; font-size: var(--pb-fs-h4, 20px); } /* -------------------------------------------------------------------------- 10. Botones y avisos nativos -------------------------------------------------------------------------- */ .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { padding: 11px 20px; background: var(--pb-primary, #ae282e); color: var(--pb-content-bg, #fff); border: 1px solid var(--pb-primary, #ae282e); border-radius: var(--pb-btn-radius, 3px); font-family: var(--pb-font-body, sans-serif); font-size: calc(var(--pb-fs-base, 16px) * .92); font-weight: 600; line-height: 1.2; text-transform: var(--pb-btn-tt, none); transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .14s var(--pb-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } @media (hover: hover) and (pointer: fine) { .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background: var(--pb-primary-dark, #8f2126); border-color: var(--pb-primary-dark, #8f2126); color: var(--pb-content-bg, #fff); text-decoration: none; } } .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .woocommerce input.button:focus-visible { background: var(--pb-primary-dark, #8f2126); border-color: var(--pb-primary-dark, #8f2126); color: var(--pb-content-bg, #fff); } /* Respuesta al pulsar, no al soltar. */ .woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active { transform: scale(0.97); transition-duration: .1s; } .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--pb-accent, #53565a); border-color: var(--pb-accent, #53565a); } .woocommerce a.button.disabled, .woocommerce button.button:disabled { opacity: .5; transform: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--pb-band, rgba(51, 51, 51, .05)); border-top-color: var(--pb-primary, #ae282e); border-radius: var(--pb-card-radius, 3px); color: var(--pb-text, #333); } .woocommerce-message::before, .woocommerce-info::before { color: var(--pb-primary, #ae282e); } .woocommerce-error { border-top-color: var(--pb-primary-dark, #8f2126); } .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--pb-primary-dark, #8f2126); } .woocommerce .woocommerce-form-login, .woocommerce .woocommerce-form-coupon { border: 1px solid var(--pb-border, #ccc); border-radius: var(--pb-card-radius, 3px); } /* -------------------------------------------------------------------------- 11. Migas y paginación -------------------------------------------------------------------------- inc/template-tags.php envuelve woocommerce_breadcrumb() con los envoltorios del tema, así que las migas de Woo ya heredan el estilo de main.css. */ .woocommerce .pb-breadcrumbs { margin: 14px 0 0; } .woocommerce .woocommerce-breadcrumb { margin: 0; color: var(--pb-muted, #666); font-size: var(--pb-fs-small, 13px); } /* La paginación del catálogo reutiliza .page-numbers de main.css. */ .woocommerce nav.woocommerce-pagination { margin-top: 34px; } .woocommerce nav.woocommerce-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0; padding: 0; border: 0; } .woocommerce nav.woocommerce-pagination ul li { margin: 0; border: 0; overflow: visible; } /* -------------------------------------------------------------------------- 12. Modo cotización -------------------------------------------------------------------------- El catálogo sin carrito. El PHP ya quita los hooks; esto es la capa visual —y la última defensa si un plugin vuelve a añadirlos—. Nótese que aquí se escribe `body.pb-quote-mode div.product`, NUNCA `body.pb-quote-mode .woocommerce div.product`. */ body.pb-quote-mode ul.products li.product .price, body.pb-quote-mode div.product p.price, body.pb-quote-mode div.product span.price { display: none; } body.pb-quote-mode .pb-product-body { padding-bottom: 18px; } /* Hueco reservado para el botón «Cotizar» del plugin Publibasics Enhancer: sin él, la tarjeta se queda sin ningún CTA. */ body.pb-quote-mode ul.products li.product .pbe-btn, body.pb-quote-mode ul.products li.product .pbe-btn--loop { margin-top: auto; } body.pb-quote-mode .cart, body.pb-quote-mode .woocommerce-cart-form, body.pb-quote-mode .site-header-cart, body.pb-quote-mode .woocommerce-menu-cart, body.pb-quote-mode .widget_shopping_cart, body.pb-quote-mode .woocommerce-message .button { display: none !important; } /* -------------------------------------------------------------------------- 13. Adaptación a pantalla y preferencias del sistema -------------------------------------------------------------------------- */ /* La ficha pasa a una columna: la galería arriba, el resumen debajo. */ @media (max-width: 900px) { .woocommerce div.product { grid-template-columns: 1fr; row-gap: 26px; padding: 22px; } .woocommerce div.product .product_title { font-size: var(--pb-fs-h3, 25px); } } @media (max-width: 700px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 18px; } .pb-product-body { padding: 14px 14px 16px; } .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { float: none; margin-bottom: 14px; line-height: 1.5; } .woocommerce .woocommerce-ordering select { width: 100%; min-width: 0; } } @media (max-width: 560px) { /* Con la ficha en una columna, el mosaico a dos deja fotos diminutas. */ .woocommerce div.product .woocommerce-product-gallery__wrapper { column-count: 1; } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin-right: 16px; } } @media (max-width: 480px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; } .woocommerce ul.products li.product a img { aspect-ratio: 16 / 9; } } @media (prefers-reduced-motion: reduce) { /* Se conserva la aparición por opacidad; se quita el desplazamiento. */ .woocommerce ul.products li.product:hover, .woocommerce ul.products li.product:hover a img, .woocommerce div.product .woocommerce-product-gallery__image:hover img, .woocommerce div.product .woocommerce-product-gallery__trigger:active, .woocommerce div.product .flex-direction-nav a:active, .woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active { transform: none !important; } } @media (prefers-contrast: more) { .woocommerce ul.products li.product, .woocommerce div.product, .woocommerce div.product .flex-control-thumbs img { border-color: var(--pb-text, #333); } .woocommerce ul.products li.product .price, .woocommerce div.product .woocommerce-product-details__short-description, .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--pb-text, #333); } } @media print { .woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce div.product .flex-direction-nav, .woocommerce div.product .flex-control-thumbs, .woocommerce div.product .woocommerce-product-gallery__trigger, .woocommerce .related, .woocommerce .upsells, .woocommerce nav.woocommerce-pagination, .woocommerce .woocommerce-ordering { display: none !important; } .woocommerce div.product { display: block; padding: 0; border: 0; } .woocommerce div.product .woocommerce-product-gallery__wrapper { column-count: 2; } .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); } .woocommerce ul.products li.product { border-color: #000; break-inside: avoid; } }