con solo un input hidden. Sin esto la columna de 88px queda vacía a la izquierda del botón. */
.nm-buy-card form.cart > .quantity:has(> input[type="hidden"]) { display: none; }
.nm-buy-card form.cart:has(> .quantity > input[type="hidden"]) > .single_add_to_cart_button { grid-column: 1 / -1; }
.nm-buy-card .quantity .qty { box-sizing: border-box; width: 100%; height: 100%; min-height: 48px; background: var(--nm-white); text-align: center; }
.tiered-pricing-option { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--nm-radius); }
.tiered-pricing-option { background: var(--nm-white); border: 1px solid var(--nm-line); margin-bottom: 6px; }
.tiered-pricing-option:hover { border-color: var(--nm-navy); }
.tiered-pricing-option__quantity { font-weight: 700; color: var(--nm-navy); }
.tiered-pricing-option-price__original { text-decoration: line-through; color: var(--nm-muted); margin-right: 6px; }
.tiered-pricing-option-price__discounted { color: var(--nm-red); font-weight: 800; }
/* El rojo es del precio mayorista (spec §5): la fila "Precio" (cantidad 1) lleva el precio normal en tinta. */
.tiered-pricing-option--default .tiered-pricing-option-price__discounted { color: var(--nm-ink); }
.tiered-pricing-option-total { margin-left: auto; font-size: var(--nm-fs-13); color: var(--nm-muted); }
/* woocommerce.css pone `.woocommerce button.button.alt{background-color:#7f54b3}`
(especificidad 0,0,3,1: .woocommerce/.button/.alt + elemento button; el :where()
que lo envuelve no suma especificidad). Le gana a `.woocommerce .button,
.woocommerce button.button` de cart.css (0,0,2,1), así que el botón "Agregar al
carrito" se pintaba con el morado por defecto de WooCommerce. Se repiten las tres
clases del botón (single_add_to_cart_button/button/alt) más `.nm-product` para
llegar a 0,0,4,0 y ganar sin !important, reusando el mismo look de `.nm-btn`. */
.nm-product .single_add_to_cart_button.button.alt {
display: block;
width: 100%;
min-height: 48px; /* acción principal: objetivo táctil cómodo */
padding: 12px 18px;
border: 0;
border-radius: var(--nm-radius);
background: var(--nm-navy);
color: var(--nm-white);
font: 700 var(--nm-fs-18) / 1 var(--nm-font-display);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.nm-product .single_add_to_cart_button.button.alt:hover {
background: var(--nm-navy-dark);
color: var(--nm-white);
}
/* La caja de cantidad (WooCommerce) queda sin estilo propio del theme junto al botón
ya intervenido arriba: se le da el mismo borde/radio que el resto de los inputs
del theme y una altura acorde al botón. */
.nm-product .quantity .qty {
height: 44px;
padding: 0 12px;
border: 1px solid var(--nm-line);
border-radius: var(--nm-radius);
font: 400 var(--nm-fs-14) / 1 var(--nm-font-body);
color: var(--nm-ink);
}
.nm-whatsapp { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; min-height: 44px; padding: 8px 16px; font-size: var(--nm-fs-14); border-radius: var(--nm-radius-pill); background: var(--nm-green); color: var(--nm-white); text-decoration: none; font-weight: 700; }
.nm-product-data { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; padding: 0 0 12px; font-size: var(--nm-fs-13); color: var(--nm-muted); }
.nm-product-data dt { color: var(--nm-muted); }
.nm-product-benefits { display: grid; gap: 8px; list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--nm-line); color: var(--nm-muted); }
.nm-product-benefits li { display: flex; align-items: center; gap: 8px; font-size: var(--nm-fs-13); }
.nm-sticky-buy { display: none; }
/* Relacionados (WooCommerce): misma tarjeta .nm-card del catálogo (content-product.php
la reutiliza), pero div.products.columns-4 llega sin layout propio del theme, así que en
escritorio cada artículo ocupa el ancho completo y la imagen se ve casi a su tamaño
intrínseco, apilada con grandes huecos verticales. Mismo ritmo que .nm-grid en shop.css. */
.related.products { margin-top: 48px; }
.related.products div.products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--nm-gutter);
list-style: none;
margin: 16px 0 0;
padding: 0;
}
/* woocommerce-layout.css agrega un clearfix de ::before/::after a los contenedores
.products pensado para su layout con floats; con `display:grid` esos pseudo-elementos
serían celdas reales y correrían el primer producto una posición. Hoy el loop es un
(woocommerce/loop/loop-start.php) y el clearfix apunta a ul.products, pero se
anula igual por si otra hoja lo aplica al contenedor. */
.nm-product .related.products div.products::before,
.nm-product .related.products div.products::after {
content: none;
display: none;
}
@media (max-width: 820px) {
:root {
/* Alto real de la barra fija (medido: ~63px) con margen de seguridad. */
--nm-sticky-buy-h: 72px;
}
.nm-product-main { grid-template-columns: 1fr; gap: 24px; }
.nm-gallery { position: static; }
.nm-buy-card form.cart { grid-template-columns: 72px minmax(0, 1fr); }
.nm-product .single_add_to_cart_button.button.alt { font-size: var(--nm-fs-16); padding-inline: 8px; }
.nm-product .single_add_to_cart_button.button.alt, .nm-buy-card .quantity .qty { min-height: 52px; }
.nm-sticky-buy .nm-btn { min-height: 48px; }
.nm-gallery-thumb img { width: 72px; height: 72px; }
.nm-product { padding: 16px; padding-bottom: calc(16px + var(--nm-sticky-buy-h)); }
.nm-product-summary .woocommerce-product-details__short-description { color: var(--nm-muted); margin: 0 0 20px; }
.nm-product-summary .product_title { font-size: var(--nm-fs-24); }
.related.products div.products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.nm-sticky-buy { display: flex; position: fixed; inset: auto 0 0 0; z-index: 50; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--nm-white); border-top: 1px solid var(--nm-line); box-shadow: 0 -4px 16px rgba(27, 29, 104, .12); }
.nm-sticky-buy[hidden] { display: none; }
/* El scroll a anclas (#reviews, etc.) no debe terminar tapado por la barra fija. */
html { scroll-padding-bottom: var(--nm-sticky-buy-h); }
/* El pie de página es lo último del documento: sin este margen, sus últimos
pixeles quedan tapados por la barra fija al llegar al final del scroll.
product.css solo se carga en la ficha de producto, así que esta regla no
afecta al footer en el resto del sitio. */
footer.nm-footer { padding-bottom: var(--nm-sticky-buy-h); }
}
@media (prefers-reduced-motion: reduce) {
.nm-gallery-main { transition: none; }
}
/* woocommerce.css pinta el precio de la ficha con `.woocommerce div.product p.price`
(0,3,2) en verde oliva #958e09: contraste 3,4:1 y fuera de la paleta. */
.nm-content .nm-product .nm-product-summary .price {
color: var(--nm-navy);
font: 800 var(--nm-fs-24) / 1.2 var(--nm-font-display);
}
/* Títulos de sección de la ficha (Descripción, Productos relacionados): el mismo estilo
de h2 de sección de la portada (Jost 800, mayúsculas, a la izquierda). */
.nm-section-title,
.related.products > h2 {
margin: 0 0 18px;
font-size: var(--nm-fs-24);
font-weight: 800;
letter-spacing: 0.02em;
text-align: left;
text-transform: uppercase;
}
/* Descripción larga: medida de lectura, no 170 caracteres por línea. */
.nm-product-description { margin-top: 40px; }
.nm-product-description-body { max-width: 75ch; }
/* Barra fija móvil: el precio manda, el botón acompaña. */
.nm-sticky-price { color: var(--nm-navy); font: 800 var(--nm-fs-18) / 1.1 var(--nm-font-display); }
.nm-sticky-price del { font-weight: 400; font-size: var(--nm-fs-14); color: var(--nm-muted); }
.nm-sticky-price ins { text-decoration: none; }