/* ==========================================================================
   MAISON MADRID — CAPA WOOCOMMERCE
   Solo CSS. Cero plantillas sobrescritas: WooCommerce y WooPayments pueden
   actualizarse sin romper nada, y el checkout no sale nunca del universo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CABECERAS DE TIENDA
   -------------------------------------------------------------------------- */

body.woocommerce-page .woocommerce-products-header,
body.woocommerce-page .woocommerce-breadcrumb {
  padding-inline: 0;
}

body .woocommerce-breadcrumb,
body .woocommerce-breadcrumb a {
  font-family: var(--mm-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mm-ash);
}
body .woocommerce-breadcrumb a:hover { color: var(--mm-bone); }

body .woocommerce-result-count,
body .woocommerce-ordering select {
  font-family: var(--mm-mono);
  font-size: .64rem;
  letter-spacing: .08em;
  color: var(--mm-ash);
}

/* --------------------------------------------------------------------------
   2. REJILLA DE PRODUCTOS
   Las tarjetas se admiten aqui y solo aqui: un producto SI es un objeto
   separado. En el resto de la web se usan filas editoriales.
   -------------------------------------------------------------------------- */

body .woocommerce ul.products,
body .woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0;
  border-top: 1px solid var(--mm-line);
  border-left: 1px solid var(--mm-line);
  margin: 0;
  padding: 0;
  list-style: none;
}

body .woocommerce ul.products li.product,
body .woocommerce-page ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  border-right: 1px solid var(--mm-line);
  border-bottom: 1px solid var(--mm-line);
  display: grid;
  gap: 1.1rem;
  align-content: space-between;
  min-height: 19rem;
  background: transparent;
  transition: background .35s var(--mm-ease);
}
body .woocommerce ul.products li.product:hover { background: var(--mm-ink-2); }

body .woocommerce ul.products li.product a img {
  margin: 0 0 .4rem;
  border-radius: 0;
  box-shadow: none;
  filter: grayscale(.35) contrast(1.05);
  transition: filter .5s var(--mm-ease), transform .6s var(--mm-ease);
}
body .woocommerce ul.products li.product:hover a img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.02);
}

body .woocommerce ul.products li.product .woocommerce-loop-product__title,
body .woocommerce ul.products li.product h2 {
  font-family: var(--mm-serif);
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--mm-bone);
  padding: 0;
  margin: 0;
}

/* Categoria como eyebrow en mono, no como enlace suelto */
body .woocommerce ul.products li.product .mm-cat,
body .woocommerce ul.products li.product .posted_in {
  font-family: var(--mm-mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mm-ash);
}

/* Etiqueta de oferta: sello mono, no pegatina redonda */
body .woocommerce span.onsale,
body .woocommerce ul.products li.product span.onsale {
  position: static;
  display: inline-block;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  margin: 0;
  padding: .3rem .5rem;
  border-radius: 0;
  border: 1px solid var(--mm-accent);
  background: transparent;
  color: var(--mm-accent-lift);
  font-family: var(--mm-mono);
  font-size: .54rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. PRECIOS
   -------------------------------------------------------------------------- */

body .woocommerce .price,
body .woocommerce ul.products li.product .price,
body .woocommerce div.product p.price,
body .woocommerce div.product span.price {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
  font-family: var(--mm-mono);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--mm-bone);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

body .woocommerce .price del,
body .woocommerce div.product p.price del {
  opacity: 1;
  color: var(--mm-ash);
  font-size: .68em;
  text-decoration: line-through;
}
body .woocommerce .price ins,
body .woocommerce div.product p.price ins {
  background: none;
  text-decoration: none;
  font-weight: 400;
  color: var(--mm-bone);
}

/* "IVA incluido" al mismo nivel que un metadato, no como nota legal perdida */
body .woocommerce .price small.woocommerce-price-suffix,
body .woocommerce .woocommerce-price-suffix {
  font-family: var(--mm-mono);
  font-size: .52rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mm-ash);
}

/* Woo mete "El precio original era / El precio actual es" para lectores de
   pantalla. Se mantiene accesible pero fuera del flujo visual. */
body .woocommerce .price .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* --------------------------------------------------------------------------
   4. FICHA DE PRODUCTO
   -------------------------------------------------------------------------- */

body .woocommerce div.product { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }

body .woocommerce div.product .product_title {
  font-family: var(--mm-serif);
  font-size: var(--mm-d2);
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--mm-bone);
}

body .woocommerce div.product div.images img {
  border-radius: 0;
  box-shadow: none;
}

body .woocommerce div.product .woocommerce-product-details__short-description p {
  color: var(--mm-bone-dim);
  max-width: 46ch;
}

body .woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: stretch;
  margin-block: 1.5rem;
}

body .woocommerce .quantity .qty,
body .woocommerce div.product form.cart .quantity .qty {
  width: 5rem;
  height: auto;
  padding: 1.05rem .6rem;
  background: transparent;
  border: 1px solid var(--mm-line-2);
  border-radius: 0;
  color: var(--mm-bone);
  font-family: var(--mm-mono);
  font-size: .9rem;
  text-align: center;
}

body .woocommerce div.product .product_meta {
  border-top: 1px solid var(--mm-line);
  padding-top: 1.2rem;
  font-family: var(--mm-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--mm-ash);
}
body .woocommerce div.product .product_meta a { color: var(--mm-bone-dim); }

body .woocommerce div.product .stock { font-family: var(--mm-mono); font-size: .68rem; letter-spacing: .08em; }
body .woocommerce div.product .stock.in-stock { color: var(--mm-ok); }
body .woocommerce div.product .stock.out-of-stock { color: var(--mm-error); }

/* Pestanas: reglas finas, sin cajas */
body .woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--mm-line);
}
body .woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
body .woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
body .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
body .woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 1rem 1.4rem;
  font-family: var(--mm-sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mm-ash);
  border-bottom: 1px solid transparent;
}
body .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--mm-bone);
  border-bottom-color: var(--mm-accent);
}

/* Selector de variaciones (variation-swatches-woo) */
body .woocommerce div.product form.cart .variations {
  border: 0;
  margin-bottom: 1rem;
}
body .woocommerce div.product form.cart .variations th,
body .woocommerce div.product form.cart .variations td { border: 0; padding: .4rem 0; }
body .woocommerce div.product form.cart .variations label {
  font-family: var(--mm-sans);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mm-ash);
}
body .variable-items-wrapper .variable-item {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--mm-line-2) !important;
  background: transparent !important;
  color: var(--mm-bone) !important;
}
body .variable-items-wrapper .variable-item.selected,
body .variable-items-wrapper .variable-item:hover {
  border-color: var(--mm-accent) !important;
  color: var(--mm-accent) !important;
}

/* --------------------------------------------------------------------------
   5. FORMULARIOS — carrito, checkout, cuenta
   -------------------------------------------------------------------------- */

body .woocommerce form .form-row label,
body .woocommerce-page form .form-row label,
body .woocommerce form .form-row label.inline {
  font-family: var(--mm-sans);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mm-ash);
  margin-bottom: .5rem;
}

body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce form .form-row select,
body .woocommerce-page form .form-row input.input-text,
body .woocommerce input[type="text"],
body .woocommerce input[type="email"],
body .woocommerce input[type="tel"],
body .woocommerce input[type="password"],
body .woocommerce input[type="number"],
body .woocommerce textarea,
body .woocommerce select {
  width: 100%;
  padding: .95rem 1rem;
  background: var(--mm-ink-2);
  border: 1px solid var(--mm-line-2);
  border-radius: 0;
  color: var(--mm-bone);
  font-family: var(--mm-sans);
  font-size: .95rem;
  line-height: 1.4;
  transition: border-color .25s, background .25s;
}

body .woocommerce form .form-row input.input-text:focus,
body .woocommerce textarea:focus,
body .woocommerce select:focus {
  border-color: var(--mm-accent);
  background: var(--mm-ink);
  outline: none;
}

body .woocommerce form .form-row input.input-text::placeholder { color: var(--mm-ash); }

body .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--mm-error); }
body .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--mm-line-2); }

/* Select2 (pais, provincia) */
body .select2-container--default .select2-selection--single {
  height: auto;
  padding: .85rem 1rem;
  background: var(--mm-ink-2);
  border: 1px solid var(--mm-line-2);
  border-radius: 0;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--mm-bone);
  line-height: 1.4;
  padding: 0;
}
body .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: .8rem; }
body .select2-dropdown {
  background: var(--mm-ink-2);
  border: 1px solid var(--mm-line-2);
  border-radius: 0;
  color: var(--mm-bone);
}
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--mm-accent);
  color: var(--mm-ink);
}
body .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--mm-ink);
  border: 1px solid var(--mm-line-2);
  color: var(--mm-bone);
}

/* Casillas y radios */
body .woocommerce form .form-row input[type="checkbox"],
body .woocommerce form .form-row input[type="radio"] {
  accent-color: var(--mm-accent);
  width: 1rem;
  height: 1rem;
}

/* --------------------------------------------------------------------------
   6. TABLAS — carrito y resumen de pedido
   -------------------------------------------------------------------------- */

body .woocommerce table.shop_table,
body .woocommerce-page table.shop_table {
  border: 0;
  border-top: 1px solid var(--mm-line-2);
  border-radius: 0;
  border-collapse: collapse;
  width: 100%;
}
body .woocommerce table.shop_table th {
  border: 0;
  border-bottom: 1px solid var(--mm-line);
  padding: 1rem .8rem;
  font-family: var(--mm-sans);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mm-ash);
  text-align: left;
}
body .woocommerce table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--mm-line);
  padding: 1.1rem .8rem;
  color: var(--mm-bone-dim);
  vertical-align: middle;
}
body .woocommerce table.shop_table td.product-name a {
  font-family: var(--mm-serif);
  font-size: 1.15rem;
  color: var(--mm-bone);
}
body .woocommerce table.shop_table .amount {
  font-family: var(--mm-mono);
  color: var(--mm-bone);
  font-variant-numeric: tabular-nums;
}
body .woocommerce table.shop_table tfoot th,
body .woocommerce table.shop_table tfoot td {
  border-bottom: 1px solid var(--mm-line);
  color: var(--mm-bone);
}
body .woocommerce table.shop_table tfoot tr.order-total th,
body .woocommerce table.shop_table tfoot tr.order-total td {
  border-top: 1px solid var(--mm-line-2);
  border-bottom: 0;
  padding-top: 1.2rem;
}
body .woocommerce table.shop_table tfoot tr.order-total .amount { font-size: 1.3rem; }

body .woocommerce a.remove {
  color: var(--mm-ash) !important;
  font-weight: 400;
  border-radius: 0;
  transition: color .25s;
}
body .woocommerce a.remove:hover {
  color: var(--mm-error) !important;
  background: transparent !important;
}

/* Tablas anchas nunca desbordan la pagina */
body .woocommerce .woocommerce-cart-form,
body .woocommerce .shop_table_responsive,
body .woocommerce-checkout-review-order {
  overflow-x: auto;
}

body .woocommerce .cart_totals h2,
body .woocommerce-checkout h3,
body .woocommerce-billing-fields h3,
body #order_review_heading {
  font-family: var(--mm-serif);
  font-size: var(--mm-d4);
  line-height: 1;
  color: var(--mm-bone);
  margin-bottom: 1.2rem;
}

/* Cupon en linea con el resto */
body .woocommerce .coupon { display: flex; gap: .6rem; flex-wrap: wrap; }
body .woocommerce .coupon input.input-text { min-width: 12rem; }

/* --------------------------------------------------------------------------
   7. AVISOS — mensajes, info y errores
   -------------------------------------------------------------------------- */

body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error,
body .woocommerce-notice {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  background: var(--mm-ink-2);
  border: 0;
  border-left: 2px solid var(--mm-accent);
  border-radius: 0;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.5rem;
  color: var(--mm-bone);
  font-size: .92rem;
  list-style: none;
}
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before { display: none; }

body .woocommerce-error { border-left-color: var(--mm-error); }
body .woocommerce-message { border-left-color: var(--mm-ok); }
body .woocommerce-info { border-left-color: var(--mm-warn); }

body .woocommerce-message .button,
body .woocommerce-info .button { padding: .7rem 1.1rem; font-size: .6rem; }

/* --------------------------------------------------------------------------
   8. CHECKOUT Y WOOPAYMENTS
   Los campos de tarjeta viven en un iframe de Stripe: no se pueden estilar
   desde aqui. Se resuelve en inc/woo.php con el filtro de apariencia
   ('night'). Aqui se viste todo lo que lo rodea.
   -------------------------------------------------------------------------- */

body .woocommerce-checkout #payment,
body .woocommerce-checkout #payment ul.payment_methods {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

body .woocommerce-checkout #payment ul.payment_methods {
  border-top: 1px solid var(--mm-line-2);
  margin: 0;
  list-style: none;
}
body .woocommerce-checkout #payment ul.payment_methods li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--mm-line);
  list-style: none;
}
/* El nombre del metodo. Se pone en la misma voz que las etiquetas de los
   campos de facturacion (Archivo, mayusculas, espaciada), que es lo que se
   lee justo encima: en minusculas era la unica etiqueta del pedido que
   rompia el sistema. */
body .woocommerce-checkout #payment ul.payment_methods li label {
  font-family: var(--mm-sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mm-bone);
}
/* La caja del metodo de pago.
 *
 * Astra la pinta de #EFEFEF desde woocommerce-grid.min.css con el selector
 * .woocommerce-page.woocommerce-checkout #payment div.payment_box, que tiene
 * especificidad 0-1-3-1. El selector que habia aqui era
 * body .woocommerce-checkout #payment div.payment_box, o sea 0-1-2-2: mismo
 * numero de identificadores y una clase menos, asi que perdia. El efecto era
 * enganoso porque Astra solo declara el fondo: el borde y el tipo de Maison
 * si se aplicaban, y la caja se quedaba clara en medio de un checkout negro.
 *
 * Con las clases del body igualadas esta regla manda. Medido en la pagina
 * real: el texto de la pasarela pasa de 1.9:1 sobre #EFEFEF a 8.9:1, es
 * decir de ilegible a por encima del minimo de 4.5:1.
 */
body.woocommerce-page.woocommerce-checkout #payment div.payment_box,
body.woocommerce.woocommerce-checkout #payment div.payment_box {
  background: var(--mm-ink-2);
  border: 1px solid var(--mm-line);
  border-radius: 0;
  color: var(--mm-bone-dim);
  margin-top: .9rem;
  padding: 1.2rem;
  font-size: .88rem;
}
/* La flecha que WooCommerce pinta apuntando a la caja: tambien la tine Astra
   del color claro, asi que se oculta con la misma especificidad. */
body.woocommerce-page.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}

/* Lo que la pasarela escribe dentro de la caja.
 *
 * No se apunta a la clase concreta de cada etiqueta a proposito. La casilla
 * de "guardar la informacion de pago" solo se pinta para usuarios que han
 * iniciado sesion, asi que no se puede comprobar en la pagina como invitado;
 * dar color al contenido en general no depende de un nombre de clase que no
 * he podido verificar. Era justo ese texto el que quedaba en 1.9:1.
 */
body .woocommerce-checkout #payment div.payment_box label,
body .woocommerce-checkout #payment div.payment_box p,
body .woocommerce-checkout #payment div.payment_box span,
body .woocommerce-checkout #payment div.payment_box li {
  color: var(--mm-bone-dim);
}
body .woocommerce-checkout #payment div.payment_box a {
  color: var(--mm-accent-lift);
}
body .woocommerce-checkout #payment div.payment_box input[type="checkbox"] {
  accent-color: var(--mm-accent);
}

/* La nota de confianza que va bajo el boton de pagar.
 *
 * WooCommerce declara #place_order con float: right, y aqui el boton ocupa
 * el ancho completo de la columna. .mm-paynote es un contenedor flex, y un
 * elemento que establece su propio contexto de formato se encoge para caber
 * al lado de un flotante: le quedaban cero pixeles de hueco y salia una
 * palabra por linea. Medido en la pagina real: 162 px de alto (doce lineas)
 * antes, 31 px (dos lineas) despues.
 */
body .woocommerce-checkout .mm-paynote {
  clear: both;
  width: 100%;
}

/* Montura de los campos de tarjeta de WooPayments */
body .wcpay-card-mount,
body #wcpay-card-element,
body .wc-block-card-elements,
body #wcpay-upe-element {
  background: var(--mm-ink-2);
  border: 1px solid var(--mm-line-2);
  padding: .9rem 1rem;
}

/* Botones express (Apple Pay / Google Pay) */
body #wcpay-payment-request-wrapper,
body .wcpay-payment-request-wrapper {
  margin-bottom: 1.2rem;
}
body .wcpay-payment-request-button-separator {
  font-family: var(--mm-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mm-ash);
}

body .woocommerce-checkout #place_order {
  width: 100%;
  padding: 1.25rem 1.9rem;
  font-size: .72rem;
}

body .woocommerce-terms-and-conditions-wrapper {
  font-size: .82rem;
  color: var(--mm-ash);
  margin-block: 1.2rem;
}
body .woocommerce-terms-and-conditions-wrapper a { color: var(--mm-bone-dim); }

/* Pedido confirmado: el momento con mas carga emocional del embudo */
body .woocommerce-order-received .woocommerce-thankyou-order-received {
  font-family: var(--mm-serif);
  font-size: var(--mm-d3);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--mm-bone);
  border: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 2rem;
}
body .woocommerce ul.order_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0;
  border-top: 1px solid var(--mm-line-2);
  border-left: 1px solid var(--mm-line);
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}
body .woocommerce ul.order_details li {
  float: none;
  margin: 0;
  padding: 1.1rem 1.2rem;
  border-right: 1px solid var(--mm-line);
  border-bottom: 1px solid var(--mm-line);
  border-left: 0;
  font-family: var(--mm-sans);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mm-ash);
}
body .woocommerce ul.order_details li strong {
  display: block;
  margin-top: .5rem;
  font-family: var(--mm-mono);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--mm-bone);
}

/* --------------------------------------------------------------------------
   9. MI CUENTA
   -------------------------------------------------------------------------- */

body .woocommerce-account .woocommerce-MyAccount-navigation ul {
  border-top: 1px solid var(--mm-line-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
body .woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--mm-line);
  list-style: none;
}
body .woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: .95rem 0;
  font-family: var(--mm-sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mm-ash);
}
body .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--mm-bone); }

/* --------------------------------------------------------------------------
   10. WIDGETS Y FILTROS DE TIENDA
   -------------------------------------------------------------------------- */

body .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content { background: var(--mm-line); border-radius: 0; }
body .woocommerce .widget_price_filter .ui-slider .ui-slider-range { background: var(--mm-accent); }
body .woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--mm-bone);
  border-radius: 0;
  width: 10px;
  height: 10px;
}

body .woocommerce-pagination ul.page-numbers {
  border: 0;
  display: flex;
  gap: .4rem;
  list-style: none;
  padding: 0;
}
body .woocommerce-pagination ul.page-numbers li { border: 0; }
body .woocommerce-pagination ul.page-numbers a,
body .woocommerce-pagination ul.page-numbers span {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  min-height: 2.6rem;
  border: 1px solid var(--mm-line);
  background: transparent;
  font-family: var(--mm-mono);
  font-size: .72rem;
  color: var(--mm-bone-dim);
}
body .woocommerce-pagination ul.page-numbers span.current,
body .woocommerce-pagination ul.page-numbers a:hover {
  border-color: var(--mm-accent);
  color: var(--mm-accent);
  background: transparent;
}

/* --------------------------------------------------------------------------
   11. MOVIL — el checkout tiene que caber en una mano
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  body .woocommerce div.product form.cart { flex-direction: column; }
  body .woocommerce div.product form.cart .quantity .qty { width: 100%; }
  body .woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; }
  body .woocommerce table.shop_table_responsive tr td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
  }
  body .woocommerce table.shop_table_responsive tr td::before {
    font-family: var(--mm-sans);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mm-ash);
  }
  /* La barra de compra fija no puede tapar el boton de pagar */
  body.woocommerce-checkout .mm-buybar,
  body.woocommerce-cart .mm-buybar { display: none; }
  body.woocommerce-checkout, body.woocommerce-cart { padding-bottom: 0; }
}

/* ==========================================================================
   EL MENU DE LA ENTRADA (pagina de producto)

   Medido en produccion antes de tocar nada: el campo de cantidad salia con
   fondo BLANCO, texto gris pizarra y la fuente "Inter Tight"; el boton en
   salmon rgb(248,199,167) y el stock en verde rgb(119,164,100). Ninguno es
   color de la casa. No venian de Astra por descuido: los pone su CSS
   dinamico EN LINEA, que gana a cualquier hoja enlazada con la misma
   especificidad. De ahi que estos selectores sean deliberadamente largos.
   ========================================================================== */

body.single-product .woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .75rem;
  margin-top: 1.4rem;
}

/* El campo de cantidad, en la casa. Fuente mono y tabular porque es una
   cifra: con la proporcional el 1 baila respecto al 2. */
body.single-product .woocommerce div.product form.cart .quantity input.qty {
  height: 3rem;
  width: 4.5rem;
  padding: 0 .5rem;
  background: var(--mm-ink-2);
  color: var(--mm-bone);
  border: 1px solid var(--mm-line-2);
  border-radius: 0;
  font-family: var(--mm-mono);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: none;
}
body.single-product .woocommerce div.product form.cart .quantity input.qty:focus {
  outline: 2px solid var(--mm-accent-lift);
  outline-offset: 2px;
  border-color: var(--mm-accent);
}

/* Le quitamos las flechas del navegador: rompen la caja y en movil son
   diminutas. La cantidad se escribe o se edita en el carrito. */
body.single-product .woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
body.single-product .woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* El boton: relleno oxblood y la MISMA altura que el campo. Antes median
   33 y 40 px, asi que quedaban desalineados. */
body.single-product .woocommerce div.product form.cart button.single_add_to_cart_button,
body.single-product .woocommerce div.product form.cart button.button.alt {
  height: 3rem;
  min-width: 14rem;
  padding-inline: 1.9rem;
  background: var(--mm-accent);
  border: 1px solid var(--mm-accent);
  color: var(--mm-bone);
  border-radius: 0;
  font-family: var(--mm-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .3s var(--mm-ease), color .3s var(--mm-ease);
}
body.single-product .woocommerce div.product form.cart button.single_add_to_cart_button:hover,
body.single-product .woocommerce div.product form.cart button.button.alt:hover {
  background: transparent;
  border-color: var(--mm-accent-lift);
  color: var(--mm-accent-lift);
}

/* La disponibilidad: dato, no semaforo. El verde de Astra chillaba sobre
   casi negro y no pertenece a la paleta. */
body.single-product .woocommerce div.product p.stock,
body.single-product .woocommerce div.product .stock.in-stock {
  font-family: var(--mm-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mm-bone-dim);
}
body.single-product .woocommerce div.product .stock.out-of-stock {
  color: var(--mm-accent-lift);
}

/* ==========================================================================
   REJILLA DE ENTRADAS CENTRADA

   Medido: la rejilla calculada eran cuatro pistas de 348.75px con solo tres
   llenas, asi que justify-content no tenia nada que centrar y quedaba un
   hueco muerto de 348px a la derecha. Las cuatro pistas las fija el CSS de
   tienda de Astra via .columns-4, con mas especificidad que mi regla. De ahi
   el selector con [class*="columns-"]: gana sin recurrir a !important.
   ========================================================================== */

body .mm-front .woocommerce ul.products[class*="columns-"],
body .mm-front ul.products[class*="columns-"] {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 21rem));
  justify-content: center;
}
body .mm-front .woocommerce ul.products[class*="columns-"] li.product,
body .mm-front ul.products[class*="columns-"] li.product {
  width: auto;
  margin: 0;
  float: none;
}

/* ==========================================================================
   EL MARCADOR DE IMAGEN

   WooCommerce sirve un PNG blanco con un icono gris cuando un producto no
   tiene imagen destacada. Sobre un fondo casi negro es un bloque blanco que
   se ve antes que el producto. Se invierte en vez de taparlo: asi sigue
   diciendo "aqui falta una imagen" -- que es informacion util en el
   escritorio -- pero sin gritar.
   ========================================================================== */

body .woocommerce img.woocommerce-placeholder,
body .woocommerce-page img.woocommerce-placeholder {
  filter: invert(1) contrast(.82);
  opacity: .5;
  background: var(--mm-ink-2);
}

/* ==========================================================================
   LA TARJETA DE ENTRADA, CENTRADA

   El titulo y la categoria ya salian centrados, pero el precio se quedaba
   alineado a la izquierda: tres tarjetas con el precio descolgado a un lado
   leen como un descuido. Se centra la columna entera y el precio pasa a ser
   la pieza que manda debajo del titulo.

   El sufijo "IVA INCLUIDO" lo pone WooCommerce (Ajustes > Impuestos >
   sufijo de precio). Aqui solo se le baja el tono: es una nota legal, no
   parte de la cifra, y en la misma linea competia con el importe.
   ========================================================================== */

body .woocommerce ul.products li.product,
body .mm-front ul.products[class*="columns-"] li.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
}

body .woocommerce ul.products li.product a img,
body .mm-front ul.products[class*="columns-"] li.product a img {
  margin-inline: auto;
}

/* El precio: cifra en mono tabular, y el sufijo debajo y apagado. */
body .woocommerce ul.products li.product .price,
body .mm-front ul.products[class*="columns-"] li.product .price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  margin: .1rem 0 0;
  font-family: var(--mm-mono);
  font-size: 1.3rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mm-bone);
}

body .woocommerce ul.products li.product .price .woocommerce-price-suffix,
body .mm-front ul.products[class*="columns-"] li.product .price .woocommerce-price-suffix {
  display: block;
  font-size: .54rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mm-ash);
}

/* Rebajado: el precio viejo tachado y apagado, el nuevo manda. */
body .woocommerce ul.products li.product .price del,
body .mm-front ul.products[class*="columns-"] li.product .price del {
  color: var(--mm-ash);
  font-size: .72em;
  opacity: .8;
}
body .woocommerce ul.products li.product .price ins,
body .mm-front ul.products[class*="columns-"] li.product .price ins {
  text-decoration: none;
  color: var(--mm-bone);
}

/* El boton, con el mismo ancho en las tres tarjetas: si cada uno se ajusta
   a su texto, la fila de botones queda desigual y se nota. */
body .woocommerce ul.products li.product a.button,
body .mm-front ul.products[class*="columns-"] li.product a.button {
  min-width: 11rem;
  margin-top: .45rem;
  align-self: center;
}

/* --------------------------------------------------------------------------
   UN SOLO BOTON DE COMPRA POR TARJETA
   --------------------------------------------------------------------------
   Astra pinta DOS controles de compra en cada tarjeta: el boton de abajo y un
   circulo blanco que aparece sobre el cartel al pasar el raton
   (.ast-on-card-button), los dos apuntando al mismo ?add-to-cart. Verificado
   en el DOM de la web, no deducido.

   Dos controles identicos no es mas sencillo: es una decision de mas. Y ese
   circulo es blanco puro sobre un cartel oscuro, el mismo problema que tenia
   el sello de agotado.

   Se oculta el del hover y se queda el de abajo, que lleva el precio al lado
   y dice lo que hace. Comprobado que la especificidad basta sin !important.

   Si quieres recuperar el circulo, borra este bloque.
   -------------------------------------------------------------------------- */

body.woocommerce-js ul.products li.product .ast-on-card-button,
body.woocommerce-page ul.products li.product .ast-on-card-button,
body .woocommerce ul.products li.product .ast-on-card-button {
  display: none;
}

/* --------------------------------------------------------------------------
   CARRITO VACIO
   --------------------------------------------------------------------------
   El estado vacio lo sustituye maison_carrito_vacio() en inc/woo.php. Lo de
   abajo es su estilo, mas una RED DE SEGURIDAD para el bloque de serie por si
   ese filtro no llegara a aplicarse (WooCommerce podria renombrar el bloque).

   El bloque de serie tenia el titulo en negro rgb(0,0,0) sobre el fondo
   rgb(10,7,8) de la casa: 1,05:1, invisible. Medido en la pagina real, y
   comprobado que con estas reglas pasa a 15,71:1.
   -------------------------------------------------------------------------- */

.mm-vacio {
  max-width: 46ch;
  margin: 0 auto;
  padding: clamp(3rem, 12vh, 7rem) 1.2rem clamp(3rem, 10vh, 6rem);
  text-align: center;
}
.mm-vacio__eti {
  margin: 0 0 1.1rem;
  font-family: var(--mm-mono);
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mm-ash);
}
.mm-vacio__tit {
  margin: 0 0 .9rem;
  font-family: var(--mm-serif);
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mm-bone);
}
.mm-vacio__txt {
  margin: 0 0 2rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--mm-bone-dim);
}
.mm-vacio__acc { margin: 0; }

/* --- Red de seguridad sobre el bloque de serie de WooCommerce --- */

body .wp-block-woocommerce-empty-cart-block h2.wp-block-heading {
  color: var(--mm-bone);
}
/* El separador de puntos, el titulo "New in store" y la rejilla con TODO el
   catalogo -- que sacaba la Nochevieja sin imagen como primera cosa que ve
   alguien con el carrito vacio. */
body .wp-block-woocommerce-empty-cart-block > hr,
body .wp-block-woocommerce-empty-cart-block > h2:nth-of-type(2),
body .wp-block-woocommerce-empty-cart-block > .wp-block-product-new {
  display: none;
}