/* UX de carrito y checkout — nutricionanimal.com.mx — CMP 04/08/2026 */
/* --- 1. Carrito sin edición de dirección --------------------------------- */
/* Refuerzo por si un HTML cacheado antiguo se sirve antes de la purga. */
.woocommerce-cart .woocommerce-shipping-calculator,
.woocommerce-cart .shipping-calculator-button,
.woocommerce-cart .shipping-calculator-form {
display: none !important;
}
.woocommerce-cart .na-cc-shipping-notice > .title {
display: none;
}
.woocommerce-cart .na-cc-shipping-notice > [data-title] {
font-family: 'Nunito', sans-serif;
font-size: 14px;
line-height: 1.45;
color: #666;
padding: 10px 0;
border: 0;
width: 100%;
text-align: left;
}
/* --- 2. Sección «¿Algo más?» -------------------------------------------- */
.na-cc-suggestions {
margin: 40px 0 50px;
font-family: 'Nunito', sans-serif;
clear: both;
}
.na-cc-suggestions__title {
font-size: 24px;
font-weight: 700;
margin: 0 0 24px;
color: #1a1a1a;
}
.na-cc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
/* Columna flex para que los botones queden alineados entre tarjetas aunque los
títulos ocupen distinto número de líneas. */
.na-cc-card {
text-align: center;
display: flex;
flex-direction: column;
}
.na-cc-card__thumb {
display: block;
margin-bottom: 12px;
}
.na-cc-card__thumb img {
width: 100%;
height: auto;
border-radius: 12px;
}
.na-cc-card__title {
font-size: 15px;
font-weight: 600;
line-height: 1.35;
margin: 0 0 6px;
}
.na-cc-card__title a {
color: #1a1a1a;
text-decoration: none;
}
.na-cc-card__title a:hover {
color: #2e7d32;
}
.na-cc-card__price {
font-size: 15px;
margin-bottom: 12px;
}
.na-cc-card__price del {
opacity: 0.6;
font-size: 13px;
}
.na-cc-card__action {
margin-top: auto;
padding-top: 4px;
}
.na-cc-card__action .button {
display: inline-block;
background: #1a1a1a;
color: #fff;
border-radius: 30px;
padding: 9px 22px;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
}
.na-cc-card__action .button:hover,
.na-cc-card__action .button:focus {
background: #2e7d32;
color: #fff;
}
@media (max-width: 991px) {
.na-cc-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* --- 2 bis. Maquetación de la página del carrito ------------------------- */
/*
ÁRBOL REAL, verificado en vivo el 04/09/2026 (playwright, carrito con dos
productos, viewport 1280). La página NO usa el widget `woocommerce-cart` de
Elementor Pro: usa un widget `shortcode` con `[woocommerce_cart]`. No existen
`.e-cart__column-start` ni `.e-cart-totals`; el marcado es el de cart.php de
serie y la maquetación del tema es de FLOATS:
div.woocommerce
├── .woocommerce-notices-wrapper
├── h3 (título «Carrito»)
├── form.woocommerce-cart-form → table.shop_table.cart
├── section.na-cc-suggestions («¿Algo más?», ahora en woocommerce_after_cart)
└── .cart-collaterals
├── .cross-sells float:left 48% (10 productos, ~2 900 px de alto)
└── .cart_totals float:right 48% (position: static, NO pegajoso)
Con floats el resumen no puede subir al lado de la tabla: cae debajo, a la
derecha de los cross-sells del tema. De ahí el «arriba una fila de productos,
luego algo más, y al final a la derecha el resumen».
POR QUÉ `display: contents` EN `.cart-collaterals`
Para que `.cart_totals` y `.cross-sells` sean ítems de la rejilla hay que
quitar de en medio a su padre. `.cart-collaterals` es un div sin semántica
(sin rol, sin foco, sin contenido propio), así que aplanarlo no tiene coste
de accesibilidad. Sus pseudoelementos de clearfix SÍ generarían caja y se
colarían como dos ítems fantasma en la rejilla, por eso se anulan abajo.
LO QUE NO SE HACE: `display: contents` en `form.woocommerce-cart-form`.
Se probó en vivo y maqueta perfecto, pero deja el