que WooCommerce crea alrededor del select no debe forzar salto. */ .woocommerce .woocommerce-ordering { display: block; margin: 0; padding: 0; } .woocommerce .woocommerce-ordering .woocommerce-result-count { display: none; } .saludables-product__price .woocommerce-Price-amount { font-weight: 700; } /* Loop nativo (ul.products): 3 cols escritorio, 2 tablet, 1 móvil. */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .woocommerce ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; min-width: 0; } @media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .woocommerce ul.products { grid-template-columns: minmax(0, 1fr); } } /* Bloques de Woo (Tienda por bloques): tarjetas con la voz de la marca. */ .wp-block-woocommerce-product-template, .wc-block-grid__products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; } .wp-block-woocommerce-product-template li, .wc-block-grid__product { width: auto !important; max-width: none !important; margin: 0 !important; } .wc-block-product, li.wc-block-product, .wp-block-woocommerce-product-template > li { background: #fff; border: 1px solid var(--saludables-line); border-radius: var(--saludables-r-lg); padding: .8rem; box-shadow: var(--saludables-shadow-sm); } .wc-block-product .wc-block-components-product-image img, .wp-block-woocommerce-product-template .wp-block-woocommerce-product-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--saludables-r-md); } .wc-block-product .wp-block-woocommerce-product-title, .wc-block-product .wc-block-components-product-title { font-family: var(--saludables-font-display); font-size: 1.02rem; font-weight: 700; } .wc-block-product .wp-block-woocommerce-product-title a, .wc-block-product .wc-block-components-product-title a { color: var(--saludables-ink); text-decoration: none; } .wc-block-product .price, .wc-block-product .wc-block-components-product-price { color: var(--saludables-deep); font-weight: 700; } .wp-block-button.wc-block-components-product-button .wp-block-button__link { background: var(--saludables-leaf); border: 2px solid var(--saludables-leaf); color: #fff; border-radius: 999px; padding: .7rem 1.4rem; font-weight: 700; } .wp-block-button.wc-block-components-product-button .wp-block-button__link:hover { background: var(--saludables-leaf-dark); border-color: var(--saludables-leaf-dark); } @media (max-width: 900px) { .wp-block-woocommerce-product-template, .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .wp-block-woocommerce-product-template, .wc-block-grid__products { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Ficha 11.0.0 — bloque principal, descripción como tarjeta y relacionados. Orden, medidas y estados viven aquí; no hay reglas duplicadas en main.css. ========================================================================== */ .saludables-single__col-media, .saludables-single__col-info { min-width: 0; max-width: 100%; box-sizing: border-box; } .saludables-single__summary { min-width: 0; max-width: 100%; box-sizing: border-box; } .saludables-single__summary .product_title { font-size: clamp(1.7rem, 3.4vw, 2.35rem); line-height: 1.12; letter-spacing: -.015em; overflow-wrap: break-word; margin: 0 0 .45rem; } .saludables-single__summary > .price { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: .55rem 0 .8rem; } .saludables-single__summary .woocommerce-product-details__short-description { font-size: 1rem; line-height: 1.7; color: var(--saludables-muted); margin: 0 0 1.1rem; } .saludables-single__summary .woocommerce-product-details__short-description p { margin: 0 0 .6rem; } .saludables-single__summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } /* Valoraciones de la ficha: discretas y en línea. */ .saludables-single__summary .woocommerce-product-rating { margin: 0 0 .5rem; } .saludables-single__summary .woocommerce-product-rating .woocommerce-review-link { font-size: .85rem; color: var(--saludables-muted); } /* Cantidad: control compacto de 44 px con menos, número y más. */ .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; margin: 1.25rem 0 .6rem; box-sizing: border-box; min-width: 0; max-width: 100%; } .woocommerce div.product form.cart div.quantity { display: inline-flex; align-items: center; gap: .25rem; margin: 0; border: 1px solid var(--saludables-line); border-radius: var(--saludables-r-full); background: #fff; padding: .2rem; min-height: 3rem; } .woocommerce div.product form.cart div.quantity .qty { width: 2.75rem; min-height: 2.5rem; padding: 0 .35rem; margin: 0; border: 0; border-radius: var(--saludables-r-sm); background: transparent; font-weight: 700; text-align: center; color: var(--saludables-ink); -moz-appearance: textfield; appearance: textfield; } .woocommerce div.product form.cart div.quantity .qty::-webkit-outer-spin-button, .woocommerce div.product form.cart div.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .woocommerce div.product form.cart div.quantity .qty:focus { outline: none; box-shadow: 0 0 0 .2rem rgba(39, 133, 87, .18); } .saludables-qty__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: var(--saludables-mint); color: var(--saludables-deep); font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background .18s, color .18s; } .saludables-qty__btn:hover { background: var(--saludables-deep); color: #fff; } .saludables-qty__btn:focus-visible { outline: 3px solid rgba(233, 190, 98, .9); outline-offset: 2px; } /* Franja de confianza: se lee como un bloque, no como una lista de enlaces. */ .saludables-single__trust { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1rem 0 0; padding: 0; max-width: 100%; } .saludables-single__trust li { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--saludables-muted); min-width: 0; } .saludables-single__trust svg { flex-shrink: 0; color: var(--saludables-leaf); } .saludables-single__trust li > span { overflow-wrap: break-word; } /* Botones: misma altura (48 px), píldora, carrito sólido y WhatsApp delineado. * Base segura: sin % fijos (55%+40%+gap desbordaba la tarjeta en escritorio), * con min-width:0 para que el rótulo pueda partirse en vez de salirse. */ .woocommerce div.product form.cart .button.single_add_to_cart_button { flex: 1 1 12rem; min-width: 0; max-width: 100%; width: auto; box-sizing: border-box; min-height: 3rem; border-radius: var(--saludables-r-full); padding: .8rem 1.2rem; font-weight: 700; font-size: 1rem; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: normal; text-align: center; overflow-wrap: break-word; } .single_add_to_cart_button { background: var(--saludables-deep); border-color: var(--saludables-deep); color: #fff; } .single_add_to_cart_button:hover { background: var(--saludables-deep-2); border-color: var(--saludables-deep-2); color: #fff; } .saludables-single__wa { flex: 1 1 12rem; min-width: 0; max-width: 100%; width: auto; box-sizing: border-box; min-height: 3rem; justify-content: center; display: inline-flex; align-items: center; gap: .5rem; white-space: normal; text-align: center; overflow-wrap: break-word; background: #fff; border-color: var(--saludables-deep); color: var(--saludables-deep); } .saludables-single__wa:hover { background: var(--saludables-deep); color: #fff; transform: translateY(-2px); } @media (min-width: 576px) { .woocommerce div.product form.cart .button.single_add_to_cart_button { flex: 1 1 12rem; min-width: 0; } .saludables-single__wa { flex: 1 1 12rem; min-width: 0; } } /* “Sin categorizar” nunca destacado: si quedó vacío, se oculta. */ .woocommerce div.product .product_meta .posted_in:empty { display: none; } .woocommerce div.product .product_meta .posted_in a[href*="uncategorized"] { display: none; } /* Separación horizontal sutil y tarjeta de descripción. */ .saludables-single__divider { height: 1px; border: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; background: var(--saludables-line); } .saludables-single__section { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; min-width: 0; } .saludables-single__section .saludables-eyebrow { margin-bottom: .5rem; } .saludables-single__panel { background: #fff; border: 1px solid var(--saludables-line); border-radius: var(--saludables-r-lg); box-shadow: var(--saludables-shadow-sm); padding: clamp(1.5rem, 3vw, 2rem); min-width: 0; } .saludables-single__panel-title { font-size: 1.3rem; font-weight: 700; color: var(--saludables-deep); margin: 0 0 .85rem; display: flex; align-items: center; gap: .6rem; } .saludables-single__panel-title::before { content: ""; width: 1.6rem; height: .25rem; border-radius: var(--saludables-r-full); background: var(--saludables-honey); flex-shrink: 0; } .saludables-single__prose { max-width: 68ch; color: var(--saludables-ink); } .saludables-single__prose p { line-height: 1.8; margin: 0 0 .9rem; } .saludables-single__prose p:last-child { margin-bottom: 0; } .saludables-single__prose > :first-child { margin-top: 0; } .saludables-single__prose ul, .saludables-single__prose ol { margin: 0 0 .9rem; padding-left: 0; list-style: none; line-height: 1.8; } .saludables-single__prose ul li { position: relative; padding-left: 1.7rem; margin-bottom: .45rem; } .saludables-single__prose ul li::before { content: ""; position: absolute; left: 0; top: .45rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--saludables-leaf); } .saludables-single__prose ol { counter-reset: saludables-prose; } .saludables-single__prose ol li { position: relative; padding-left: 1.9rem; margin-bottom: .45rem; counter-increment: saludables-prose; } .saludables-single__prose ol li::before { content: counter(saludables-prose); position: absolute; left: 0; top: .1rem; display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--saludables-mint); color: var(--saludables-deep); font-size: .78rem; font-weight: 700; } .saludables-single__prose a { color: var(--saludables-leaf-dark); font-weight: 600; } .saludables-single__prose table { width: 100%; border-collapse: collapse; margin-bottom: .9rem; } .saludables-single__prose th, .saludables-single__prose td { text-align: left; padding: .6rem .4rem; border-bottom: 1px solid var(--saludables-line); font-size: .95rem; } .saludables-single__prose th { font-weight: 700; color: var(--saludables-deep); width: 40%; } /* Pestañas restantes (información adicional, valoraciones) y upsells. */ .saludables-single__extras { min-width: 0; margin-top: clamp(1.5rem, 3vw, 2.25rem); } .woocommerce div.product .woocommerce-tabs { margin-top: 0; } .woocommerce div.product .woocommerce-tabs .panel { padding: clamp(1.2rem, 3vw, 2rem); } .woocommerce div.product .woocommerce-tabs .panel p:last-child { margin-bottom: 0; } .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes { width: 100%; border-collapse: collapse; } .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th, .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td { padding: .7rem .4rem; border-bottom: 1px solid var(--saludables-line); font-size: .95rem; text-align: left; } .woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th { width: 38%; font-weight: 700; color: var(--saludables-deep); } /* Relacionados: 4/3/2/1 columnas, grupo centrado si son pocos. */ .saludables-single__related { min-width: 0; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--saludables-line); } .saludables-single__related .saludables-eyebrow { margin-bottom: .5rem; } .saludables-single__related .saludables-section__title { margin-bottom: 0; } .saludables-related__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; } /* En el archivo de categoría esta misma clase se imprime sobre una `.row` de Bootstrap (`row-cols-1 row-cols-sm-2 row-cols-lg-3`). Bootstrap fija `width: 100% / 50% / 33.33%` a cada `.col`, y al repintarla como grid esos anchos se pelean con `grid-template-columns`: cada tarjeta mide mas que su columna y el grupo se descuadra. Como hijo de grid manda el ancho de la pista, asi que se neutraliza el ancho de Bootstrap. */ .saludables-related__grid.row { margin-left: 0; margin-right: 0; } .saludables-related__grid > * { width: auto !important; max-width: none !important; flex: none !important; min-width: 0; } .saludables-related__grid .saludables-product { width: 100%; height: 100%; } /* Las tarjetas de la cuadrícula también se estiran a la misma altura. */ .saludables-related__grid > .saludables-product { align-self: stretch; } /* Con pocas tarjetas el grupo se centra en vez de dejar un vacío a la derecha. Solo en escritorio: `:has()` tiene mas especificidad que las media queries de abajo, asi que sin este min-width las 17rem fijas ganaban tambien en movil y desbordaban la pantalla. */ @media (min-width: 1200px) { .saludables-related__grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 17rem)); } .saludables-related__grid:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 17rem); } } @media (max-width: 1199px) { .saludables-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .saludables-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 419px) { .saludables-related__grid { grid-template-columns: minmax(0, 1fr); max-width: 20rem; margin-inline: auto; } } /* Tarjetas de relacionados: alto parejo y botón siempre abajo. */ .saludables-related__grid .saludables-product__media { aspect-ratio: 1 / 1; } .saludables-related__grid .saludables-product__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: 4.05em; } .saludables-related__grid .saludables-product__body { gap: .45rem; } .saludables-related__grid .saludables-product__foot { margin-top: auto; } .saludables-related__grid .saludables-product__foot .saludables-btn { flex: 0 0 auto; min-width: 8.5rem; } @media (max-width: 419px) { .saludables-related__grid .saludables-product__foot { flex-direction: column; align-items: stretch; } .saludables-related__grid .saludables-product__foot .saludables-btn { width: 100%; min-width: 0; } } /* Galería clicable indica lightbox. */ .saludables-single__gallery .woocommerce-product-gallery__image a { cursor: zoom-in; display: block; } .saludables-single__gallery .flex-control-thumbs img { cursor: pointer; } /* Toolbar tienda: sin desbordes en móvil. */ .saludables-shop__toolbar { min-width: 0; max-width: 100%; } .saludables-shop__count { overflow-wrap: break-word; } @media (max-width: 575px) { .woocommerce div.product div.images img { max-height: 380px; } .woocommerce div.product div.images .flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .saludables-shop__grid .saludables-product:hover .saludables-product__media img { transform: none; } } /* ========================================================================== Carrito 1.10.0 — resumen a la derecha, entrega y sin “envío gratis”. ========================================================================== */ .saludables-cart__layout { align-items: start; } .saludables-cart__products, .saludables-cart__summary { min-width: 0; } .saludables-cart__summary .saludables-whatsapp-panel { position: sticky; top: 6rem; } /* Carrito por bloques: productos izquierda + resumen derecha (una sola tarjeta). */ .saludables-cart-blocks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; } .saludables-cart-blocks > :first-child { min-width: 0; } .saludables-cart-blocks .saludables-whatsapp-panel { position: sticky; top: 6rem; } /* Sin envío gratis: este pedido confirma el costo por WhatsApp. */ .saludables-cart-blocks .wc-block-components-totals-shipping, body.woocommerce-cart .wc-block-components-totals-shipping__change-address, .saludables-cart__layout .woocommerce-shipping-totals, .saludables-whatsapp-panel ~ .wc-block-components-totals-shipping { display: none !important; } /* Resumen: importe, entrega y campos. */ .saludables-whatsapp-panel h2 { margin: 0 0 .4rem; } .saludables-whatsapp-total { font-size: 1.1rem; margin: .8rem 0 .2rem; color: var(--saludables-deep); overflow-wrap: break-word; } .saludables-whatsapp-discount { color: var(--saludables-leaf-dark); font-weight: 600; font-size: .92rem; margin: .2rem 0 0; } .saludables-wa-fieldset { border: 1px solid var(--saludables-line); border-radius: var(--saludables-r-md); padding: .9rem 1rem 1rem; margin: 1rem 0 0; } .saludables-wa-fieldset legend { font-size: .95rem; padding: 0 .4rem; } .saludables-wa-radio { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; font-weight: 600; cursor: pointer; min-height: 2.75rem; } .saludables-wa-radio input { width: 1.25rem; height: 1.25rem; accent-color: var(--saludables-leaf); flex-shrink: 0; } .saludables-wa-delivery, .saludables-wa-pickup { margin-top: .9rem; } .saludables-wa-delivery .form-control { border-radius: var(--saludables-r-sm); border-color: var(--saludables-line); min-height: 2.75rem; } .saludables-wa-delivery .form-control:focus { border-color: var(--saludables-leaf); box-shadow: 0 0 0 .25rem rgba(39, 133, 87, .15); outline: none; } .saludables-whatsapp-panel [data-saludables-wa-order][aria-disabled="true"] { opacity: .55; } .saludables-whatsapp-panel [data-saludables-wa-order].is-loading { pointer-events: none; opacity: .7; } @media (max-width: 991px) { .saludables-cart-blocks { grid-template-columns: minmax(0, 1fr); } .saludables-cart-blocks .saludables-whatsapp-panel, .saludables-cart__summary .saludables-whatsapp-panel { position: static; } } /* ========================================================================== Ajustes móviles de tienda (1.16.2) Van aquí y no en main.css porque este archivo se encola después: es el que gana cuando dos reglas de igual peso se pisan. Solo bajo 767 px. ========================================================================== */ /* Catálogo: en móvil queda a una columna, y sin tope la foto se comía media * pantalla. Ancho máximo y proporción 3/2 en lugar de 4/3. */ @media (max-width: 767px) { .saludables-shop__grid { max-width: 21rem; margin-inline: auto; } .saludables-shop__grid .saludables-product__media { aspect-ratio: 3 / 2; } .saludables-shop__grid .saludables-product__body { padding: .9rem; gap: .3rem; } .saludables-shop__grid .saludables-product__title { font-size: 1rem; line-height: 1.3; } .saludables-shop__grid .saludables-product__foot { padding-top: .55rem; gap: .5rem .6rem; } } /* Zona de compra: cantidad, añadir al carrito y WhatsApp. * * Estas reglas están ancladas a `.saludables-single__summary` porque las * anteriores usaban `.woocommerce div.product form.cart`, y esta plantilla * (`woocommerce/single-product.php`) no envuelve la ficha en `div.product`: * se comprobó en el DOM y `document.querySelectorAll('div.product').length` * da 0. Ese prefijo nunca casó, así que el formulario se veía sin `display: * flex` ni `gap`, y por eso los tres controles quedaban pegados y en la misma * línea. Las reglas viejas se dejan intactas por si algún día vuelve el * envoltorio de WooCommerce; estas son las que realmente aplican. */ .saludables-single__summary form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; margin: 1.25rem 0 .6rem; box-sizing: border-box; min-width: 0; max-width: 100%; } .saludables-single__summary form.cart div.quantity { display: inline-flex; align-items: center; gap: .25rem; margin: 0; border: 1px solid var(--saludables-line); border-radius: var(--saludables-r-full); background: #fff; padding: .2rem; min-height: 3rem; box-sizing: border-box; min-width: 0; max-width: 100%; } .saludables-single__summary form.cart div.quantity .qty { width: 2.75rem; min-height: 2.5rem; padding: 0 .35rem; margin: 0; border: 0; border-radius: var(--saludables-r-sm); background: transparent; font-weight: 700; text-align: center; color: var(--saludables-ink); -moz-appearance: textfield; appearance: textfield; } .saludables-single__summary form.cart div.quantity .qty:focus { outline: none; box-shadow: 0 0 0 .2rem rgba(39, 133, 87, .18); } .saludables-single__summary form.cart .button.single_add_to_cart_button { flex: 1 1 12rem; min-width: 0; max-width: 100%; width: auto; box-sizing: border-box; min-height: 3rem; border-radius: var(--saludables-r-full); padding: .8rem 1.2rem; font-weight: 700; font-size: 1rem; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: normal; text-align: center; overflow-wrap: break-word; } .saludables-single__summary .saludables-single__wa { flex: 1 1 12rem; min-width: 0; max-width: 100%; width: auto; box-sizing: border-box; min-height: 3rem; justify-content: center; display: inline-flex; align-items: center; gap: .5rem; white-space: normal; text-align: center; overflow-wrap: break-word; } .saludables-single__summary .saludables-single__wa svg { flex-shrink: 0; } .saludables-single__summary .saludables-single__wa > span { min-width: 0; overflow-wrap: anywhere; } /* Productos variables: WooCommerce envuelve cantidad + botones en * `.woocommerce-variation-add-to-cart.variations_button` dentro del form * (dentro de `.single_variation_wrap`). Sin este flex, el `gap` del form no * llega a los botones y quedan pegados borde con borde. */ .saludables-single__summary form.cart .single_variation_wrap { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; } .saludables-single__summary form.cart .woocommerce-variation-add-to-cart, .saludables-single__summary form.cart .variations_button { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; box-sizing: border-box; min-width: 0; max-width: 100%; } .saludables-single__summary form.cart .woocommerce-variation-add-to-cart div.quantity { margin: 0; } .saludables-single__summary form.cart .woocommerce-variation-add-to-cart .button.single_add_to_cart_button, .saludables-single__summary form.cart .woocommerce-variation-add-to-cart .saludables-single__wa { margin: 0; } @media (min-width: 768px) { /* La cantidad ocupa su propia linea. Los dos botones comparten fila * con base flexible (no % fijos): si no caben, el wrap los apila * sin desbordar la tarjeta blanca. */ .saludables-single__summary form.cart div.quantity { flex: 1 1 100%; max-width: 100%; box-sizing: border-box; justify-content: flex-start; } .saludables-single__summary form.cart .button.single_add_to_cart_button { flex: 1 1 12rem; min-width: 0; } .saludables-single__summary .saludables-single__wa { flex: 1 1 12rem; min-width: 0; } } /* Móvil: hueco de 15 px entre los tres, píldora de cantidad con aire y botones * de 3.25 rem para que el dedo no los confunda. Cada uno a una línea. */ @media (max-width: 767px) { .saludables-single__summary form.cart, .saludables-single__summary form.cart .woocommerce-variation-add-to-cart { gap: 15px; margin: 1.25rem 0 .9rem; } .saludables-single__summary form.cart .woocommerce-variation-add-to-cart, .saludables-single__summary form.cart .variations_button { margin: 0; width: 100%; max-width: 100%; flex-direction: column; align-items: stretch; gap: 15px; } .saludables-single__summary form.cart div.quantity { gap: .45rem; padding: .25rem; } .saludables-qty__btn { width: 2.75rem; height: 2.75rem; } .saludables-single__summary form.cart div.quantity .qty { min-height: 2.75rem; } .saludables-single__summary form.cart .button.single_add_to_cart_button, .saludables-single__summary .saludables-single__wa, .saludables-single__summary form.cart .woocommerce-variation-add-to-cart .button.single_add_to_cart_button, .saludables-single__summary form.cart .woocommerce-variation-add-to-cart .saludables-single__wa, .saludables-single__summary form.cart .variations_button .button.single_add_to_cart_button, .saludables-single__summary form.cart .variations_button .saludables-single__wa { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 3.25rem; margin: 0; } /* Respaldo sin Flexbox gap: margen al botón superior del producto variable, * con especificidad suficiente para ganar a los estilos de WooCommerce. */ @supports not (gap: 15px) { .saludables-single__summary form.cart .button.single_add_to_cart_button { margin-bottom: 15px; } .saludables-single__summary form.variations_form.cart .woocommerce-variation-add-to-cart .button.single_add_to_cart_button, .saludables-single__summary form.variations_form.cart .variations_button .button.single_add_to_cart_button { margin-bottom: 15px; } } .saludables-single__trust { justify-content: center; text-align: center; } /* Los campos + / − del carrito también se separan. */ .woocommerce .quantity .qty { min-height: 2.75rem; } .woocommerce .quantity .qty + .button, .woocommerce .quantity .qty ~ .button { margin-left: .5rem; } } /* ========================================================================== Agrupados: cada hijo es una tarjeta (nombre, precio y cantidad separados). Sustituye a la tabla nativa, que mezclaba contador + nombre + precio en una sola línea. El formulario y sus nombres de campo no cambian. ========================================================================== */ .saludables-grouped-products { width: 100%; max-width: 100%; margin-top: 1.5rem; box-sizing: border-box; } .saludables-grouped-products__title { font-size: 1.15rem; font-weight: 700; color: var(--saludables-deep); margin: 0 0 1rem; } .saludables-grouped-products__list { display: grid; gap: 1rem; min-width: 0; } .saludables-grouped-product { width: 100%; max-width: 100%; padding: 1rem; box-sizing: border-box; border: 1px solid var(--saludables-line); border-radius: var(--saludables-r-lg); background: #fff; box-shadow: var(--saludables-shadow-sm); min-width: 0; } .saludables-grouped-product__content { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-width: 0; } .saludables-grouped-product__image { display: block; min-width: 0; } .saludables-grouped-product__image img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--saludables-r-md); } .saludables-grouped-product__info { min-width: 0; } .saludables-grouped-product__name { margin: 0 0 .35rem; font-size: 1.02rem; font-weight: 700; overflow-wrap: anywhere; } .saludables-grouped-product__name a { color: var(--saludables-ink); text-decoration: none; } .saludables-grouped-product__name a:hover { color: var(--saludables-leaf-dark); } .saludables-grouped-product__price { margin-bottom: .4rem; font-weight: 700; color: var(--saludables-deep); overflow-wrap: break-word; } .saludables-grouped-product__price .stock { font-size: .85rem; } .saludables-grouped-product__description { margin: 0; color: var(--saludables-muted); font-size: .9rem; line-height: 1.6; overflow-wrap: break-word; } .saludables-grouped-product__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; min-width: 0; max-width: 100%; } .saludables-grouped-product__actions .quantity { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; max-width: 100%; } .saludables-grouped-product__qty-label { font-size: .85rem; font-weight: 600; color: var(--saludables-muted); } .saludables-grouped-product__actions .saludables-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 0; max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; box-sizing: border-box; } .saludables-grouped-product__actions .saludables-btn svg { flex-shrink: 0; } @media (max-width: 767px) { .saludables-grouped-product__content { grid-template-columns: 72px minmax(0, 1fr); align-items: start; } .saludables-grouped-product__image img { width: 72px; height: 72px; } .saludables-grouped-product__actions { grid-column: 1 / -1; justify-content: stretch; } .saludables-grouped-product__actions > * { flex: 1 1 100%; width: 100%; } .saludables-grouped-product__actions .quantity { justify-content: center; } }