/* ==========================================================================
   Matmap · Capa de armonización
   --------------------------------------------------------------------------
   tokens.css se carga EL PRIMERO y solo declara variables.
   Esta hoja se carga LA ÚLTIMA y normaliza lo que cada plugin pinta a su
   manera, para que la página se lea como un solo documento y no como bloques
   pegados unos debajo de otros.

   Solo toca: ritmo vertical, superficies, títulos de sección, botones,
   tablas y foco. No cambia estructura ni comportamiento.

   Medido en una ficha real de ceramicos.es antes de escribirla:
     · 4 títulos de sección con 30,4 / 25,6 / 20 / 20 px y pesos 700/800
     · 8 tratamientos de botón, con radios 0/4/6/11/12/20/50 %
     · un azul #007AAF que no está en la identidad de la marca
   ========================================================================== */

/* En movil los bloques se juntan: hay menos ancho y el scroll es mas largo. */
@media (max-width:768px){
  :root{ --mm-flow:32px; --mm-flow-tight:20px; }
}


/* ==========================================================================
   1 · RITMO VERTICAL
   Cada plugin traía su propio margen (18, 20, 28, 32, 36 px). Unificado, para
   que la distancia entre bloques sea siempre la misma y la página respire
   igual de arriba a abajo.
   ========================================================================== */
.mm-carousel-block,
.mmuxa-accordion,
.mmcat-block,
.ccolec-block,
.mipro-wrap,
.mipro-seccion{
  margin-top:var(--mm-flow);
  margin-bottom:var(--mm-flow);
}

/* Dentro de la columna de compra los bloques van más juntos: son pasos de una
   misma decisión, no secciones independientes. */
.cpf-pf .cpf-comp + .cpf-comp{ margin-top:var(--mm-flow-tight); }


/* ==========================================================================
   2 · TÍTULOS DE SECCIÓN
   Mismo peso visual para todo lo que es "cabecera de bloque", venga del
   plugin que venga.
   ========================================================================== */
.mm-block__title,
.mmcat-block__title,
.ccolec-title,
.mipro-titulo{
  font-size:clamp(20px,2vw,26px) !important;
  font-weight:700 !important;
  line-height:1.2;
  letter-spacing:-.012em;
  color:var(--mm-brand) !important;
  margin:0 0 20px !important;
  text-wrap:balance;
}

/* Subtítulo / entradilla de bloque, cuando el plugin la tiene. */
.mmcat-block__subtitle,
.ccolec-subtitle,
.mipro-subtitulo{
  font-size:15px;
  line-height:1.55;
  color:var(--mm-ink-2);
  margin:-12px 0 20px;
  max-width:64ch;
}


/* ==========================================================================
   3 · SUPERFICIES
   Una sola definición de "tarjeta": mismo borde, mismo radio, misma sombra.
   ========================================================================== */
.mm-card,
.ccolec-card,
.mmcat-card,
.mipro-card,
.cpf-card{
  background:var(--mm-paper);
  border:1px solid var(--mm-line);
  border-radius:var(--mm-r-lg);
  box-shadow:var(--mm-sh-1);
  transition:transform var(--mm-ease), box-shadow var(--mm-ease), border-color var(--mm-ease);
}
@media (hover:hover){
  .mm-card:hover,
  .ccolec-card:hover,
  .mmcat-card:hover,
  .mipro-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--mm-sh-2);
    border-color:var(--mm-line-strong);
  }
}


/* ==========================================================================
   4 · BOTONES
   Tres variantes y una sola geometría. Antes había ocho tratamientos con
   radios de 0, 4, 6, 11, 12, 20 px y 50 %.

   IMPORTANTE: no se tocan los estados deshabilitados. "Añadir al carrito"
   se pinta en gris a propósito hasta que se calcula la cantidad; forzarle el
   color de marca haría creer que está activo.
   ========================================================================== */
.mm-card__btn,
.cpf-btn,
.calc-boton-flotante,
.calc-boton-adicional,
.calc-boton-modal-confirmar,
.ccolec-card-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--mm-control-h);
  padding:11px 20px;
  border-radius:var(--mm-r-md) !important;
  font-family:inherit;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.2;
  letter-spacing:0;
  text-decoration:none;
  text-transform:none !important;
  cursor:pointer;
  transition:background-color var(--mm-ease), border-color var(--mm-ease),
             color var(--mm-ease), box-shadow var(--mm-ease), transform var(--mm-ease);
}

/* --- Primario: la acción de marca --- */
.mm-card__btn{
  background:var(--mm-brand) !important;
  color:#fff !important;
  border:1px solid var(--mm-brand) !important;
}
.mm-card__btn:hover{
  background:var(--mm-brand-ink) !important;
  border-color:var(--mm-brand-ink) !important;
  box-shadow:var(--mm-sh-2);
}

/* --- Acento: la acción que mueve dinero (calcular, comprar) --- */
.cpf-btn--primary,
.calc-boton-principal-flotante{
  background:var(--mm-accent) !important;
  color:#fff !important;
  border:1px solid var(--mm-accent) !important;
}
.cpf-btn--primary:hover:not([disabled]),
.calc-boton-principal-flotante:hover:not([disabled]){
  background:var(--mm-accent-ink) !important;
  border-color:var(--mm-accent-ink) !important;
  box-shadow:var(--mm-sh-2);
}

/* --- Secundario: acciones de apoyo ---
   Aquí vivía un azul #007AAF que no pertenece a la identidad de la marca
   (Solicitar muestra, Consultar stock, confirmar en modales). */
.calc-boton-adicional,
.cpf-aa-btn-sample,
.cpf-btn--secondary{
  background:var(--mm-paper) !important;
  color:var(--mm-brand) !important;
  border:1.5px solid var(--mm-line-strong) !important;
}

/* El boton de la tarjeta de Colecciones es el MISMO que el del catalogo:
   son las dos la misma pieza (una tarjeta de producto). Antes uno era relleno
   navy y el otro un fantasma con borde. */
.ccolec-card-btn{
  background:var(--mm-brand) !important;
  color:#fff !important;
  border:1px solid var(--mm-brand) !important;
  width:100%;
}
.ccolec-card-btn:hover{
  background:var(--mm-brand-ink) !important;
  border-color:var(--mm-brand-ink) !important;
}
/* En hover pasan a solido, NO a un tinte claro.
   CPF les fuerza color:#fff con selectores de ID (#botonMuestra...), asi que
   un fondo claro dejaba texto blanco sobre casi-blanco: ilegible. Poniendolo
   solido, ese blanco forzado es justo lo que hace falta. */
.calc-boton-adicional:hover:not([disabled]),
.cpf-aa-btn-sample:hover:not([disabled]),
.cpf-btn--secondary:hover:not([disabled]){
  background:var(--mm-brand) !important;
  border-color:var(--mm-brand) !important;
  color:#fff !important;
}
.calc-boton-adicional:hover:not([disabled]) i,
.cpf-aa-btn-sample:hover:not([disabled]) i,
.calc-boton-adicional:hover:not([disabled]) svg,
.cpf-aa-btn-sample:hover:not([disabled]) svg{
  color:#fff !important;
  fill:currentColor;
}

/* #3 · Consultar stock: CPF le fuerza color:#fff con un selector de ID, asi
   que ponerle fondo blanco lo dejaba invisible (blanco sobre blanco).
   Se queda como boton solido, que es lo que su texto blanco pide. */
.calc-boton-contacto,
#contact-ayuda-button.calc-boton-adicional,
.cpf-aa-btn-stock-editable.calc-boton-adicional{
  background:var(--mm-brand) !important;
  color:#fff !important;
  border:1px solid var(--mm-brand) !important;
}
.calc-boton-contacto:hover,
#contact-ayuda-button.calc-boton-adicional:hover,
.cpf-aa-btn-stock-editable.calc-boton-adicional:hover{
  background:var(--mm-brand-ink) !important;
  border-color:var(--mm-brand-ink) !important;
}

/* Iconos heredados dentro de los botones secundarios */
.calc-boton-adicional i,
.cpf-aa-btn-sample i,
.calc-boton-contacto i{ color:inherit !important; }

/* --- Deshabilitado: un solo tratamiento, se respeta el significado --- */
.mm-card__btn[disabled],
.cpf-btn[disabled],
.calc-boton-flotante[disabled],
.calc-boton-adicional[disabled],
[aria-disabled="true"].calc-boton-flotante{
  background:var(--mm-wash) !important;
  color:var(--mm-muted) !important;
  border-color:var(--mm-line) !important;
  box-shadow:none !important;
  cursor:not-allowed;
  transform:none !important;
}


/* ==========================================================================
   5 · TABLAS
   La tabla de precios de la ficha y la ficha técnica del acordeón se leían
   como componentes de webs distintas.
   ========================================================================== */
.cpf-price-ref__table th,
.mmuxa-body .shop_attributes th{
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--mm-muted);
}
.cpf-price-ref__table td,
.mmuxa-body .shop_attributes td{
  font-size:14.5px;
  color:var(--mm-ink);
  font-style:normal;
}
.cpf-price-ref__table tr{ border-bottom:1px solid var(--mm-line); }


/* ==========================================================================
   6 · FOCO
   Un solo anillo para todo lo pulsable. Antes cada plugin usaba su grosor y
   su color, y algunos lo quitaban del todo.
   ========================================================================== */
.mm-card__btn:focus-visible,
.cpf-btn:focus-visible,
.calc-boton-flotante:focus-visible,
.calc-boton-adicional:focus-visible,
.calc-boton-contacto:focus-visible,
.ccolec-card-btn:focus-visible,
.mm-block__title a:focus-visible,
.mmcat-card a:focus-visible,
.ccolec-card a:focus-visible{
  outline:3px solid rgba(58,57,113,.38) !important;
  outline-offset:2px !important;
}

@media (prefers-reduced-motion:reduce){
  .mm-card,.ccolec-card,.mmcat-card,.mipro-card,
  .mm-card__btn,.cpf-btn,.calc-boton-flotante,.calc-boton-adicional{
    transition:none !important;
  }
  .mm-card:hover,.ccolec-card:hover,.mmcat-card:hover,.mipro-card:hover{
    transform:none !important;
  }
}


/* ==========================================================================
   7 · TIPOGRAFÍA
   Una sola pila para los once plugins. Antes había cinco distintas y una
   webfont (Plus Jakarta Sans) que solo usaba el blog, descargada de Google.
   ========================================================================== */
.mm-carousel-block, .mm-card, .mmuxa-accordion, .mmuxp-header,
.mmcat-block, .ccolec-block, .ccolec-inner, .mipro-wrap,
.cpf-pf, .gpl-popup, .gpl-modal{
  font-family:var(--mm-font);
}

/* Antetítulos y etiquetas: mismo tratamiento en todos los bloques. */
.mm-card__kicker,
.mmuxp-brand-link,
.mmcat-badge,
.ccolec-badge,
.mm-card__save{
  font-size:var(--mm-fs-eyebrow);
  font-weight:var(--mm-fw-medium);
  letter-spacing:var(--mm-ls-eyebrow);
  text-transform:uppercase;
  line-height:1.2;
}

/* Nombre de producto dentro de cualquier tarjeta, venga del plugin que venga. */
.mm-card__title a,
.ccolec-card-name,
.mmcat-card__title{
  font-size:var(--mm-fs-base);
  font-weight:var(--mm-fw-bold);
  line-height:1.3;
  color:var(--mm-brand);
  text-decoration:none;
}

/* Precio: el naranja de marca, mismo peso y cifras tabulares en todas partes.
   Antes cada listado lo pintaba con un peso distinto (400, 600, 800). */
.mm-card__price-main,
.ccolec-card-price,
.mmcat-card__price,
.mmuxp-price-amount{
  color:var(--mm-accent);
  font-weight:var(--mm-fw-medium);
  font-variant-numeric:tabular-nums;
}


/* ==========================================================================
   8 · BADGES
   Píldoras de estado con una sola forma. Los colores siguen significando lo
   mismo que antes; lo que se unifica es la geometría.
   ========================================================================== */
.mm-badge,
.mmcat-badge,
.ccolec-badge,
.ccolec-badge-blue,
.ccolec-badge-green{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:var(--mm-r-full);
  font-size:var(--mm-fs-eyebrow);
  font-weight:var(--mm-fw-medium);
  line-height:1.25;
  letter-spacing:.03em;
}
/* Los dos badges de color de Colecciones pasan a los semánticos de marca. */
.ccolec-badge-blue { background:var(--mm-brand-tint); color:var(--mm-brand); }
.ccolec-badge-green{ background:var(--mm-good-bg);    color:var(--mm-good);  }


/* ==========================================================================
   9 · GEOMETRÍA
   Doce radios distintos (0, 4, 6, 8, 10, 11, 12, 14, 16, 20, 24, 50 %)
   reducidos a la escala de cuatro pasos.
   ========================================================================== */
.mmcat-card, .ccolec-card, .mipro-card{ border-radius:var(--mm-r-lg); }
.mmcat-chip, .ccolec-code, .ccolec-label{ border-radius:var(--mm-r-sm); }
.ccolec-card-img, .mmcat-block__overlay{ border-radius:0; }

/* Imagen superior de tarjeta: las esquinas de arriba siguen al contenedor. */
.mmcat-card > img:first-child,
.ccolec-card > img:first-child,
.ccolec-card-img{
  border-top-left-radius:var(--mm-r-lg);
  border-top-right-radius:var(--mm-r-lg);
}


/* ==========================================================================
   10 · CABECERAS DE BLOQUE
   Las secciones abren todas igual: título, aire, contenido. Antes cada
   plugin resolvía su cabecera a su manera y por eso parecían pegotes.
   ========================================================================== */
.ccolec-header,
.mmcat-block__cap{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

/* CTA de cierre de bloque.
   ATENCION: .ccolec-cta y .mmcat-block__cta NO son enlaces de texto, son
   botones rellenos. Tratarlos como enlace dejaba texto navy sobre fondo navy
   y texto blanco sobre fondo blanco: ilegibles. */
.mmcat-block__cta,
.ccolec-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--mm-control-h);
  padding:11px 22px;
  border-radius:var(--mm-r-full);
  background:var(--mm-brand);
  color:#fff;
  border:1px solid var(--mm-brand);
  font-size:var(--mm-fs-sm);
  font-weight:var(--mm-fw-medium);
  letter-spacing:.02em;
  text-transform:none;
  text-decoration:none;
  transition:background var(--mm-ease), box-shadow var(--mm-ease);

  /* El texto de estas CTA es largo ("Explorar suelo porcelánico imitación
     barro"). Con nowrap se salía de la tarjeta. */
  white-space:normal;
  text-align:center;
  max-width:100%;
  line-height:1.25;
}
.mmcat-block__cta:hover,
.ccolec-cta:hover{
  background:var(--mm-brand-ink);
  border-color:var(--mm-brand-ink);
  box-shadow:var(--mm-sh-2);
}


/* ==========================================================================
   11 · SEPARADORES
   Un solo grosor y un solo color de línea.
   ========================================================================== */
.ccolec-divider,
.mmuxp-header,
.mm-toolbar{
  border-color:var(--mm-line);
  border-width:1px;
}


/* ==========================================================================
   FUERA DE ALCANCE
   --------------------------------------------------------------------------
   Esta hoja NO toca el header (.mh-*). Se intentó y fue un error: al cargarse
   la última, el display:inline-flex de los botones pisaba el display:none con
   el que el header oculta el toggle que no corresponde a cada tamaño, y
   salían dos botones de menú a la vez (además de romper el logo en móvil).

   Regla: no estilar desde aquí plugins cuyo código no tengamos delante.
   ========================================================================== */


/* ==========================================================================
   12 · ESQUINAS DE LA TARJETA DE PRODUCTO
   --------------------------------------------------------------------------
   El cartel de estado y el corazon de la lista de deseos se pintaban los dos
   arriba a la izquierda, y el corazon (z-index 9999) tapaba al cartel
   (z-index 2): "Novedad" no se leia nunca.

   El logo de marca se queda DONDE ESTABA, arriba a la derecha. Lo que baja es
   el cartel de estado, a la parte inferior de la imagen, donde no compite con
   nada y se lee entero.
   ========================================================================== */
.mm-card__media{ position:relative; }

/* Cartel de estado abajo a la izquierda, sobre la imagen. */
.mm-card__media .mm-badge{
  top:auto;
  bottom:10px;
  left:10px;
  right:auto;
  z-index:5;
  max-width:calc(100% - 20px);
}

/* Si la tarjeta lleva puntos de galeria, el cartel sube para no taparlos. */
.mm-card__media:has(.mm-dots) .mm-badge{ bottom:34px; }

/* Anula la regla antigua, que desplazaba el cartel a la derecha suponiendo
   que seguia arriba junto al corazon. */
.mm-card__media:has(.mmpa-wishlist-btn, .yith-wcwl-add-to-wishlist, .tinv-wraper) .mm-badge{
  left:10px;
  max-width:calc(100% - 20px);
}

@media (max-width:480px){
  .mm-card__media .mm-badge{ max-width:calc(100% - 16px); }
}