/*
Theme Name: Mundo Herrajes 2026
Theme URI: https://mundoherrajes.mx
Author: IICED — Instituto de Innovación y Certificación Digital
Author URI: https://iiced.mx
Description: Tema de tienda para Mundo: Herrajes y Herramientas. Portada administrable desde el Personalizador, páginas y entradas con Gutenberg, y tienda WooCommerce con precios de mayoreo para Clientes Premium. Existencias como «Disponible / Agotado», nunca como cantidad.
Version: 0.5.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mundo-herrajes
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
WC requires at least: 8.0
WC tested up to: 11.1
*/

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — extraídos de la maqueta "Mundo Herrajes.dc.html" (2026-08-25).
   Los valores que el Personalizador puede cambiar se reescriben en
   inc/customizer-css.php; estos son el punto de partida.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Marca */
  --mh-red:          #C8102E;   /* rojo principal: CTA, enlaces, acentos      */
  --mh-red-dark:     #A00D24;   /* hover del rojo                             */
  --mh-amber:        #F5A300;   /* ámbar: destacados, badges de entrega       */
  --mh-amber-light:  #FFB828;
  --mh-amber-dark:   #B07000;   /* ámbar legible sobre fondo claro            */
  --mh-blue:         #0E4F73;   /* azul del bloque de carpinteros             */
  --mh-blue-pale:    #EAF4FA;
  --mh-blue-line:    #C3DEEC;
  --mh-green:        #127A3D;   /* «Disponible»                               */

  /* Neutros */
  --mh-ink:          #131719;   /* franjas oscuras, pie de página             */
  --mh-text:         #23292E;   /* texto base                                 */
  --mh-muted:        #6A757E;
  --mh-muted-2:      #8A949B;
  --mh-muted-3:      #9AA5AD;
  --mh-on-dark:      #E3E7EA;
  --mh-bg:           #F6F7F8;
  --mh-surface:      #FFFFFF;
  --mh-surface-alt:  #FBFCFC;
  --mh-surface-2:    #F1F3F4;
  --mh-surface-3:    #EDF0F2;
  --mh-line:         #E3E7EA;
  --mh-line-strong:  #D5DBDF;

  /* Tipografía */
  --mh-font-head: Archivo, "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mh-font-body: Barlow, "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Forma */
  --mh-radius:     8px;
  --mh-radius-sm:  6px;
  --mh-radius-lg: 13px;
  --mh-radius-pill: 999px;

  /* Medidas */
  --mh-maxw:   1280px;
  --mh-gutter: 24px;

  /* Sombras */
  --mh-shadow-sm: 0 1px 3px rgba(19, 23, 25, .06);
  --mh-shadow:    0 2px 10px rgba(19, 23, 25, .07);
  --mh-shadow-lg: 0 12px 34px rgba(19, 23, 25, .13);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--mh-bg);
  font-family: var(--mh-font-body);
  color: var(--mh-text);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--mh-red); text-decoration: none; }
a:hover { color: var(--mh-red-dark); text-decoration: underline; }

input, select, button, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }

::selection { background: var(--mh-amber); color: var(--mh-ink); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mh-font-head);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--mh-ink);
  margin: 0;
}

@keyframes mhIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.mh-site { min-height: 100vh; display: flex; flex-direction: column; }
.mh-main { flex: 1 0 auto; }

.mh-wrap {
  max-width: var(--mh-maxw);
  margin-inline: auto;
  padding-inline: var(--mh-gutter);
}

.mh-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mh-ink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--mh-radius) 0;
}
.mh-skip-link:focus { left: 0; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--mh-amber);
  outline-offset: 2px;
}

.mh-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Piezas compartidas ------------------------------------------------------ */

.mh-eyebrow {
  font-family: var(--mh-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mh-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.mh-section-head h2 { font-size: 30px; line-height: 1.15; }
.mh-section-head p { margin: 6px 0 0; color: var(--mh-muted); font-size: 15px; }

.mh-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--mh-radius);
  font-family: var(--mh-font-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.mh-btn:hover { text-decoration: none; transform: translateY(-1px); }

.mh-btn--primary { background: var(--mh-red); color: #fff; }
.mh-btn--primary:hover { background: var(--mh-red-dark); color: #fff; }

.mh-btn--amber { background: var(--mh-amber); color: var(--mh-ink); }
.mh-btn--amber:hover { background: var(--mh-amber-light); color: var(--mh-ink); }

.mh-btn--ghost {
  background: transparent;
  color: var(--mh-ink);
  border: 1px solid var(--mh-line-strong);
}
.mh-btn--ghost:hover { background: var(--mh-surface-2); color: var(--mh-ink); }

.mh-btn--on-dark {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
}
.mh-btn--on-dark:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.mh-link-more {
  font-family: var(--mh-font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--mh-red);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [0] BARRA SUPERIOR
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-topbar {
  background: var(--mh-ink);
  color: var(--mh-muted-3);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.mh-topbar__inner {
  max-width: var(--mh-maxw);
  margin-inline: auto;
  padding: 8px var(--mh-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.mh-topbar__group { display: flex; gap: 18px; align-items: center; }
.mh-topbar__claim { color: var(--mh-amber); font-weight: 600; }
.mh-topbar__phone { color: var(--mh-on-dark); font-weight: 600; }
.mh-topbar__phone:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   [1] CABECERA
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--mh-surface);
  border-bottom: 1px solid var(--mh-line);
  box-shadow: var(--mh-shadow-sm);
}
.mh-header__inner {
  max-width: var(--mh-maxw);
  margin-inline: auto;
  padding: 12px var(--mh-gutter);
  display: flex;
  gap: 20px;
  align-items: center;
}
.mh-header__brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.mh-header__brand img {
  display: block;
  height: 44px;          /* alto explícito: un SVG sin dimensiones propias colapsa a 0 con max-height */
  width: auto;
  max-width: 240px;
  object-fit: contain;
  flex-shrink: 0;
}
.mh-header__brand-text {
  font-family: var(--mh-font-head);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--mh-ink);
}
.mh-header__brand:hover { text-decoration: none; }

.mh-search { flex: 1 1 auto; max-width: 560px; position: relative; }
.mh-search input[type="search"] {
  width: 100%;
  padding: 11px 44px 11px 14px;
  border: 1px solid var(--mh-line-strong);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-alt);
}
.mh-search input[type="search"]::placeholder { color: var(--mh-muted-2); }
.mh-search button {
  position: absolute;
  right: 4px; top: 4px; bottom: 4px;
  width: 36px;
  border: 0;
  border-radius: var(--mh-radius-sm);
  background: var(--mh-ink);
  color: #fff;
  display: grid;
  place-items: center;
}
.mh-search button:hover { background: var(--mh-red); }

.mh-header__actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.mh-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--mh-line-strong);
  border-radius: var(--mh-radius);
  background: var(--mh-surface);
  color: var(--mh-ink);
  font-family: var(--mh-font-head);
  font-weight: 600;
  font-size: 14px;
}
.mh-icon-btn:hover { background: var(--mh-surface-2); color: var(--mh-ink); text-decoration: none; }

.mh-cart-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--mh-radius-pill);
  background: var(--mh-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}

/* Navegación */
.mh-nav { border-top: 1px solid var(--mh-line); background: var(--mh-surface-alt); }
.mh-nav__inner {
  max-width: var(--mh-maxw);
  margin-inline: auto;
  padding: 0 var(--mh-gutter);
}
.mh-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mh-nav a {
  display: block;
  padding: 12px 14px;
  font-family: var(--mh-font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--mh-text);
}
.mh-nav a:hover,
.mh-nav .current-menu-item > a {
  color: var(--mh-red);
  text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--mh-red);
}

.mh-nav-toggle { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   [2] HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-hero {
  background: var(--mh-ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.mh-hero__inner {
  max-width: min(var(--mh-maxw), 100%);
  margin-inline: auto;
  padding: 54px var(--mh-gutter) 58px;
  position: relative;
  z-index: 2;
  /* Dos columnas: el mensaje manda, la foto acompaña. Debajo de 900 px se
     apilan y la foto pasa abajo, donde no le roba la primera pantalla. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 40px;
  align-items: center;
}
.mh-hero__content { animation: mhIn .5s ease both; }
.mh-hero__eyebrow { color: var(--mh-amber); }
.mh-hero h1 {
  color: #fff;
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.06;
  letter-spacing: -.035em;
  margin: 14px 0 0;
}
.mh-hero__lead {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--mh-on-dark);
  max-width: 48ch;
}
.mh-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ── Columna de la foto ── */
.mh-hero__media { position: relative; animation: mhIn .5s .1s ease both; }
.mh-hero__foto {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: var(--mh-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}
.mh-hero__tarjeta {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(3px);
  color: var(--mh-ink);
  border-radius: 10px;
  padding: 13px 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.mh-hero__tarjeta .mh-eyebrow { color: var(--mh-red); font-size: 11px; }
.mh-hero__tarjeta strong { display: block; margin-top: 5px; font-size: 15.5px; line-height: 1.3; }
.mh-hero__tarjeta p { margin: 5px 0 0; font-size: 13px; color: var(--mh-muted); }

/* ── Los tres distintivos ── */
.mh-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.mh-hero__point {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 13px;
  border-left: 2px solid var(--mh-amber);
}
.mh-hero__point strong { font-size: 14.5px; color: #fff; }
.mh-hero__point span { font-size: 13px; color: var(--mh-on-dark); }

@media (max-width: 900px) {
  .mh-hero__inner { grid-template-columns: 1fr; gap: 30px; }
  .mh-hero__media { order: 2; }
  .mh-hero__foto { max-height: 300px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [3] CATEGORÍAS
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-section { padding: 56px 0 0; }
.mh-section--last { padding-bottom: 64px; }

.mh-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.mh-cat {
  position: relative;
  display: block;
  min-height: 168px;
  padding: 18px;
  border-radius: var(--mh-radius-lg);
  overflow: hidden;
  background: var(--mh-ink);
  color: #fff;
  isolation: isolate;
}
.mh-cat:hover { text-decoration: none; color: #fff; }
.mh-cat img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.mh-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(19,23,25,.28) 0%, rgba(19,23,25,.86) 100%);
}
.mh-cat:hover img { transform: scale(1.05); }
.mh-cat__title {
  font-family: var(--mh-font-head);
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  margin: 0;
}
.mh-cat__blurb { margin: 6px 0 0; font-size: 13.5px; color: var(--mh-on-dark); line-height: 1.45; }
.mh-cat__count {
  position: absolute;
  left: 18px; bottom: 16px;
  font-family: var(--mh-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mh-amber);
}

/* ═══════════════════════════════════════════════════════════════════════════
   [4] TARJETA DE PRODUCTO — compartida con el catálogo de WooCommerce
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mh-card,
.woocommerce ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
  margin: 0;
  padding: 0;
  text-align: left;
}
.mh-card:hover,
.woocommerce ul.products li.product:hover {
  box-shadow: var(--mh-shadow);
  transform: translateY(-2px);
}

.mh-card__media,
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--mh-surface-2);
  margin: 0;
}

.mh-card__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.mh-card__brand,
.woocommerce ul.products li.product .mh-card__brand {
  font-family: var(--mh-font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mh-muted-2);
}

.mh-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--mh-font-head);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--mh-ink);
  padding: 0;
  margin: 0;
}

.mh-card__sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--mh-muted);
}

.mh-card__foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

/* Badges de existencia y entrega */
.mh-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--mh-radius-pill);
  font-family: var(--mh-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mh-badge--stock  { background: rgba(18, 122, 61, .1);  color: var(--mh-green); }
.mh-badge--out    { background: var(--mh-surface-3);    color: var(--mh-muted); }
.mh-badge--today  { background: #FFF8E9;                color: var(--mh-amber-dark); }
.mh-badge--pro    { background: var(--mh-blue-pale);    color: var(--mh-blue); }

.mh-card__badges {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [5] BLOQUE DE CARPINTEROS — la pieza de más valor de la propuesta
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-pro {
  margin-top: 56px;
  background: var(--mh-blue);
  color: #fff;
}
.mh-pro__inner {
  max-width: var(--mh-maxw);
  margin-inline: auto;
  padding: 48px var(--mh-gutter);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
}
.mh-pro__eyebrow { color: var(--mh-amber); }
.mh-pro h2 {
  color: #fff;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 14px 0 0;
}
.mh-pro__lead { margin: 16px 0 0; font-size: 16.5px; line-height: 1.6; color: #D8E7F0; }
.mh-pro__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mh-pro__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 11px; }
.mh-pro__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: #E6F1F7; }
.mh-pro__list li::before {
  content: "✓";
  color: var(--mh-amber);
  font-weight: 700;
  flex-shrink: 0;
}

/* Tabla de escalas de volumen */
.mh-tiers {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--mh-radius-lg);
  padding: 22px;
}
.mh-tiers__title {
  font-family: var(--mh-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mh-amber);
  margin: 0 0 14px;
}
.mh-tiers table { width: 100%; border-collapse: collapse; }
.mh-tiers th, .mh-tiers td {
  padding: 9px 4px;
  text-align: left;
  font-size: 14.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mh-tiers th {
  font-family: var(--mh-font-head);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #B9D3E2;
  font-weight: 700;
}
.mh-tiers td:last-child { text-align: right; font-weight: 700; font-family: var(--mh-font-head); }
.mh-tiers tr:last-child td { border-bottom: 0; }
.mh-tiers__note { margin: 14px 0 0; font-size: 13px; color: #B9D3E2; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   [6] FLETE POR CÓDIGO POSTAL
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-flete__panel {
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.mh-flete__form { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.mh-flete__form input {
  flex: 1 1 160px;
  padding: 12px 14px;
  border: 1px solid var(--mh-line-strong);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
}
.mh-flete__result {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--mh-radius);
  background: var(--mh-blue-pale);
  border: 1px solid var(--mh-blue-line);
  font-size: 15px;
  line-height: 1.55;
}
.mh-flete__result[hidden] { display: none; }
.mh-flete__result strong { color: var(--mh-blue); font-family: var(--mh-font-head); }
.mh-flete__result--error { background: var(--mh-surface-2); border-color: var(--mh-line-strong); }

.mh-flete__zones { border-collapse: collapse; width: 100%; }
.mh-flete__zones th, .mh-flete__zones td {
  padding: 10px 6px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--mh-line);
}
.mh-flete__zones th {
  font-family: var(--mh-font-head);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mh-muted);
}
.mh-flete__zones td:last-child, .mh-flete__zones th:last-child { text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════════
   [7] GUÍAS
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-guias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.mh-guia {
  display: flex;
  flex-direction: column;
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.mh-guia:hover { box-shadow: var(--mh-shadow); transform: translateY(-2px); }
.mh-guia img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mh-guia__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mh-guia__tag { color: var(--mh-red); }
.mh-guia__title { font-size: 17px; line-height: 1.3; }
.mh-guia__title a { color: var(--mh-ink); }
.mh-guia__title a:hover { color: var(--mh-red); text-decoration: none; }
.mh-guia__meta { font-size: 12.5px; color: var(--mh-muted-2); }
.mh-guia__blurb { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--mh-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   [8] VISÍTANOS  ·  [9] DÓNDE ESTAMOS
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-visit__panel {
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-radius-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.mh-visit h2 { font-size: 27px; line-height: 1.15; margin-top: 12px; }
.mh-visit__rows { display: grid; gap: 14px; margin-top: 20px; }
.mh-visit__row { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.mh-visit__row strong { display: block; font-family: var(--mh-font-head); color: var(--mh-ink); }
.mh-visit__row span { color: var(--mh-muted); }

.mh-map {
  background: var(--mh-ink);
  border-top: 4px solid var(--mh-red);
  color: var(--mh-on-dark);
}
.mh-map__inner {
  max-width: var(--mh-maxw);
  margin-inline: auto;
  padding: 44px var(--mh-gutter);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 36px;
  align-items: center;
}
.mh-map h2 { color: #fff; font-size: 30px; line-height: 1.12; margin: 12px 0 0; }
.mh-map__eyebrow { color: var(--mh-amber); }
.mh-map p { color: var(--mh-muted-3); font-size: 15px; line-height: 1.6; }
.mh-map__embed {
  border-radius: var(--mh-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  aspect-ratio: 16 / 9;
  background: #1C2226;
}
.mh-map__embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   [10] PIE DE PÁGINA
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-footer { background: var(--mh-ink); color: var(--mh-muted-2); margin-top: auto; }
.mh-footer__inner {
  max-width: var(--mh-maxw);
  margin-inline: auto;
  padding: 44px var(--mh-gutter) 20px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
.mh-footer h3 {
  font-family: var(--mh-font-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mh-on-dark);
  margin: 0 0 14px;
}
.mh-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mh-footer a { color: var(--mh-muted-2); font-size: 14.5px; }
.mh-footer a:hover { color: #fff; text-decoration: none; }
.mh-footer__about { font-size: 14.5px; line-height: 1.6; margin: 0; }
.mh-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mh-footer__brand img {
  height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
}
.mh-footer__about { max-width: 330px; }
.mh-footer li { font-size: 14.5px; line-height: 1.45; }
.mh-footer a.mh-footer__tel { color: #fff; font-weight: 600; }
.mh-footer a.mh-footer__wa { color: var(--mh-amber, #F5A300); font-weight: 600; }
.mh-footer__legal { display: inline-flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0 0 0 14px; padding: 0; }
.mh-footer__legal a { font-size: 13px; }
.mh-footer__bottom {
  max-width: var(--mh-maxw);
  margin-inline: auto;
  padding: 16px var(--mh-gutter) 28px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WOOCOMMERCE — que la tienda herede la identidad de la portada
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-shop { padding-block: 32px 64px; }

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product { width: auto !important; float: none !important; }

.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; }
.woocommerce ul.products li.product > a:not(.button) { padding: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button { margin-inline: 14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin-top: 12px; }
.woocommerce ul.products li.product .button { margin-bottom: 14px; }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--mh-ink);
  font-family: var(--mh-font-head);
  font-weight: 800;
  font-size: 19px;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: var(--mh-muted-2);
  font-weight: 500;
  font-size: 15px;
  opacity: 1;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
  color: var(--mh-red);
  text-decoration: none;
  background: transparent;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--mh-red);
  color: #fff;
  font-family: var(--mh-font-head);
  font-weight: 700;
  border-radius: var(--mh-radius);
  padding: 12px 18px;
  line-height: 1;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--mh-red-dark);
  color: #fff;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  border-top-color: var(--mh-blue);
  background: var(--mh-surface);
  border-radius: var(--mh-radius);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--mh-blue); }

.woocommerce div.product .product_title {
  font-family: var(--mh-font-head);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
}
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--mh-muted); line-height: 1.6; }

.woocommerce div.product .stock { font-family: var(--mh-font-head); font-weight: 700; }
.woocommerce div.product .stock.in-stock { color: var(--mh-green); }
.woocommerce div.product .stock.out-of-stock { color: var(--mh-muted); }

.woocommerce table.shop_table {
  border-radius: var(--mh-radius-lg);
  border-color: var(--mh-line);
}
.woocommerce table.shop_table th { font-family: var(--mh-font-head); color: var(--mh-ink); }

.woocommerce .woocommerce-breadcrumb { color: var(--mh-muted-2); font-size: 13.5px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--mh-muted); }

.woocommerce nav.woocommerce-pagination ul { border-color: var(--mh-line); border-radius: var(--mh-radius); overflow: hidden; }
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--mh-red);
  color: #fff;
}

/* Ranura donde el plugin de WhatsApp inyecta su botón */
.mh-wa-slot:empty { display: none; }
.mh-wa-slot { margin-top: 12px; }

/* Aviso de cuenta de mayoreo en la ficha */
.mh-pro-hint {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: var(--mh-radius);
  background: var(--mh-blue-pale);
  border: 1px solid var(--mh-blue-line);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mh-text);
}
.mh-pro-hint strong { color: var(--mh-blue); font-family: var(--mh-font-head); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENIDO EDITORIAL (Gutenberg)
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-entry { max-width: 760px; margin-inline: auto; padding-block: 40px 64px; }
.mh-entry__title { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; }
.mh-entry__meta { margin-top: 10px; color: var(--mh-muted-2); font-size: 14px; }
.mh-entry__content { margin-top: 28px; font-size: 17px; line-height: 1.7; }
.mh-entry__content > * + * { margin-top: 1.1em; }
.mh-entry__content h2 { font-size: 26px; margin-top: 1.8em; }
.mh-entry__content h3 { font-size: 21px; margin-top: 1.6em; }
.mh-entry__content img { border-radius: var(--mh-radius); }
.mh-entry__content blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--mh-amber);
  color: var(--mh-muted);
}
.mh-entry__content ol, .mh-entry__content ul { padding-left: 1.3em; }
.mh-entry__content li + li { margin-top: .5em; }

.mh-archive { padding-block: 40px 64px; }
.mh-archive__head { margin-bottom: 26px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .mh-pro__inner,
  .mh-map__inner,
  .mh-flete__panel,
  .mh-visit__panel { grid-template-columns: 1fr; }
  .mh-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .mh-split { grid-template-columns: 1fr !important; }
  .mh-hide-sm { display: none !important; }

  .mh-header__inner { flex-wrap: wrap; gap: 12px; }
  .mh-search { order: 3; flex-basis: 100%; max-width: none; }
  .mh-header__actions { margin-left: auto; }

  .mh-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--mh-line-strong);
    border-radius: var(--mh-radius);
    background: var(--mh-surface);
    font-family: var(--mh-font-head);
    font-weight: 600;
    font-size: 14px;
  }
  .mh-nav__inner { padding-block: 0; }
  .mh-nav ul {
    display: none;
    flex-direction: column;
    gap: 0;
    padding-block: 6px;
  }
  .mh-nav ul.is-open { display: flex; }
  .mh-nav li + li { border-top: 1px solid var(--mh-line); }
  .mh-nav a { padding: 13px 4px; }
  .mh-nav a:hover, .mh-nav .current-menu-item > a { box-shadow: none; }

  .mh-hero__inner { padding-block: 44px 48px; }
  .mh-section { padding-top: 40px; }
  .mh-pro { margin-top: 40px; }
  .mh-pro__inner { padding-block: 36px; }
}

@media (max-width: 560px) {
  :root { --mh-gutter: 16px; }
  .mh-footer__inner { grid-template-columns: 1fr; gap: 26px; }
  .mh-topbar__inner { justify-content: flex-start; gap: 10px; }
  .mh-section-head h2 { font-size: 25px; }
  .mh-products, .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .mh-cats { grid-template-columns: 1fr 1fr; }
  .mh-cat { min-height: 140px; padding: 14px; }
  .mh-cat__title { font-size: 16px; }
  .mh-cat__blurb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Flete: chips de localidad y comparativa con el marketplace
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-flete__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.mh-chip {
  padding: 9px 13px;
  background: var(--mh-surface-2, #F1F3F4);
  border: 1px solid var(--mh-line, #E3E7EA);
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mh-muted, #4A555D);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mh-chip:hover, .mh-chip:focus-visible {
  background: var(--mh-blue);
  border-color: var(--mh-blue);
  color: #fff;
}
.mh-flete__pista { margin: 12px 0 0; font-size: 13px; color: var(--mh-muted-2, #6A757E); }

/* La comparativa: dos columnas de valor, una tenue y la nuestra en verde.
   El verde no es decorativo — es la única señal de color en la tabla y por eso
   la mirada cae donde el argumento gana. */
.mh-porque {
  background: var(--mh-surface, #fff);
  border: 1px solid var(--mh-line, #D5DBDF);
  border-radius: var(--mh-radius, 10px);
  padding: 22px 24px;
}
.mh-porque .mh-eyebrow { color: var(--mh-red); }
.mh-porque__lista { margin: 16px 0 0; }
.mh-porque__fila {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--mh-line, #E3E7EA);
}
.mh-porque__fila:last-child { border-bottom: 0; }
.mh-porque__fila dt { font-weight: 600; font-size: 14.5px; color: var(--mh-ink); }
.mh-porque__fila dd { margin: 0; font-size: 13.5px; text-align: right; }
.mh-porque__fuera { color: var(--mh-muted-2, #8A949B); }
.mh-porque__aqui  { color: #1B7A46; font-weight: 700; }

@media (max-width: 720px) {
  .mh-porque__fila { grid-template-columns: 1fr; gap: 3px; }
  .mh-porque__fila dd { text-align: left; }
  .mh-porque__fuera::before { content: "Afuera: "; color: var(--mh-muted-2); }
  .mh-porque__aqui::before  { content: "Aquí: "; color: var(--mh-muted-2); font-weight: 500; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Correcciones de la 0.3.2 — alinear con la maqueta aprobada
   ═══════════════════════════════════════════════════════════════════════════ */

/* OJO con el selector largo: `.mh-header__brand img` (clase + elemento) le gana
   por especificidad a una clase sola, y le imponía 44 px al logotipo.
   El logotipo del negocio: alto explícito porque el contenedor es flex y una
   imagen sin altura fija colapsa (misma lección que el SVG de la 0.1.0).
   El alto se configura en Personalizar → Mundo Herrajes → Logotipo y llega como
   variable (--mh-logo-h / --mh-logo-h-movil). De fábrica 97 px y 64 px: el
   triple de la 0.3.5 (138/92) le pareció grande al cliente y pidió −30 %.
   El archivo se exporta a 276 px de alto para que no se vea blando. */
.mh-header__brand img.mh-header__logo {
  display: block;
  height: var(--mh-logo-h, 97px);
  width: auto;
  max-width: min(420px, 60vw);
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
}
/* La barra se angosta para que un logo alto no la desborde. */
.mh-header__inner { padding-block: 8px; }

@media (max-width: 900px) {
  .mh-header__brand img.mh-header__logo { height: var(--mh-logo-h-movil, 64px); max-width: 55vw; }
}

/* ── Tarjetas de categoría: foto arriba, texto abajo ──────────────────────
   La maqueta NO las tiene con el título encimado sobre la foto: son tarjetas
   blancas con la imagen de sombrero. Encimar el texto sobre fotos de producto
   con fondo claro lo dejaba ilegible. */
.mh-cats { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.mh-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  background: var(--mh-surface, #fff);
  color: var(--mh-ink);
  border: 1px solid var(--mh-line, #D5DBDF);
  border-radius: var(--mh-radius-lg, 12px);
  overflow: hidden;
  transition: box-shadow .16s ease, transform .16s ease;
}
.mh-cat:hover { color: var(--mh-ink); box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-2px); }
.mh-cat img {
  position: static;
  width: 100%;
  height: 150px;
  object-fit: cover;
  opacity: 1;
  filter: none;
  background: var(--mh-surface-2, #EEF1F3);
}
.mh-cat::after { content: none; }
.mh-cat__title { margin: 14px 16px 0; font-size: 16.5px; line-height: 1.25; color: var(--mh-ink); }
.mh-cat__blurb { margin: 5px 16px 0; font-size: 13px; color: var(--mh-muted, #5B646D); }
.mh-cat__count {
  margin: 10px 16px 15px; padding-top: 9px;
  font-size: 12.5px; font-weight: 700; color: var(--mh-red);
  border-top: 1px solid var(--mh-line, #E3E7EA);
}
.mh-cat__count::after { content: " →"; }

/* ── Tarjetas de producto fuera de las páginas de WooCommerce ──────────────
   Los estilos de tarjeta colgaban de `.woocommerce ul.products`, y la PORTADA
   no lleva esa clase en el body: por eso en la tienda se veían bien y aquí el
   precio y el botón salían corridos como texto. Se repiten sin ese ancestro. */
.mh-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mh-products li.product {
  display: flex; flex-direction: column;
  background: var(--mh-surface, #fff);
  border: 1px solid var(--mh-line, #D5DBDF);
  border-radius: var(--mh-radius, 10px);
  overflow: hidden;
  margin: 0 !important; width: auto !important; float: none !important;
  transition: box-shadow .16s ease;
}
.mh-products li.product:hover { box-shadow: 0 8px 22px rgba(0,0,0,.09); }
.mh-products li.product a img { width: 100%; height: 170px; object-fit: contain; background: var(--mh-surface-2,#F4F6F8); margin: 0; padding: 10px; }
.mh-products li.product .mh-card__brand { display: block; margin: 12px 13px 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--mh-muted-2,#8A949B); text-transform: uppercase; }
.mh-products li.product .woocommerce-loop-product__title { margin: 4px 13px 0 !important; padding: 0 !important; font-size: 14.5px !important; line-height: 1.3; font-weight: 600; }
.mh-products li.product .mh-card__sku { display: block; margin: 4px 13px 0; font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--mh-muted-2,#8A949B); }
.mh-products li.product .price { display: block !important; margin: 6px 13px 0 !important; font-size: 17px !important; font-weight: 800; color: var(--mh-ink) !important; }
.mh-products li.product .mh-card__badges { display: block; margin: 12px 13px 0; }
.mh-products li.product .button {
  display: block; margin: 12px 13px 13px !important;
  padding: 11px 12px !important;
  background: var(--mh-red) !important; color: #fff !important;
  border-radius: 8px !important; font-weight: 700 !important; font-size: 13.5px !important;
  text-align: center; text-decoration: none;
}
.mh-products li.product .button:hover { background: #A60D26 !important; }
/* El título empuja el botón al pie para que todas las tarjetas cierren parejo */
.mh-products li.product .price { margin-top: auto !important; }

/* ── Guías ── */
.mh-guia__tag { color: var(--mh-amber); }

/* El contador de la tarjeta de categoría venía posicionado en absoluto para el
   diseño anterior (texto encimado sobre la foto). En el diseño de tarjeta
   blanca tiene que fluir al pie, o se monta sobre el título. */
.mh-cat__count { position: static; margin-top: auto; }
.mh-cat__title { margin-top: 14px; }

/* El mapa arranca oscuro mientras Google responde: un fondo neutro evita que
   parezca un hueco roto durante esos segundos. */
.mh-map__embed { background: var(--mh-surface-2, #EEF1F3); min-height: 320px; }
.mh-map__embed iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }

/* ── Flete: promesa de entrega y lista de destinos (0.4.0) ─────────────── */
.mh-flete__aviso {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--mh-amber);
  background: #FFF6E0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--mh-ink);
}
.mh-flete__etiqueta { display: block; margin: 18px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--mh-muted); text-transform: uppercase; }
.mh-flete__select {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid #D5DBDF;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 15.5px;
}
.mh-flete__select:focus { outline: 2px solid var(--mh-red); outline-offset: 1px; }
.mh-flete__form { margin-top: 10px; }
.mh-flete__result-aviso { display: inline-block; margin-top: 6px; font-size: 13.5px; color: var(--mh-muted); }

/* ── Fotos de producto completas, sin recorte (0.4.1) ──────────────────────
   Las fotos de fabricante vienen en formatos distintos (Truper cuadradas,
   Dexter verticales). Con `cover` el marco las recortaba: a los candados les
   cortaba el arco. `contain` sobre blanco enseña la pieza entera, que es lo
   que el cliente necesita ver para saber si es la que busca. */
.mh-card__media,
.woocommerce ul.products li.product a img,
ul.products li.product a img {
  object-fit: contain;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}
.mh-cat img {
  object-fit: contain;
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
}

/* ── Catálogo por categoría (0.5.0) ─────────────────────────────────────── */
.mh-catalogo__bajada { margin: 6px 0 0; color: var(--mh-muted); font-size: 15.5px; }
.mh-catalogo__indice {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 22px 0 8px; padding-bottom: 18px; border-bottom: 1px solid #E3E8EB;
}
.mh-catalogo__indice .mh-chip { text-decoration: none; }
.mh-catalogo__indice .mh-chip span { margin-left: 4px; color: var(--mh-muted); font-weight: 500; }
.mh-catalogo__seccion { margin-top: 38px; scroll-margin-top: 130px; }
.mh-catalogo__seccion-cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 14px;
}
.mh-catalogo__seccion-cabeza h2 { margin: 0; font-size: 24px; }
.mh-catalogo__seccion-cabeza h2 a { color: var(--mh-ink); text-decoration: none; }
.mh-catalogo__ver { color: var(--mh-red); font-weight: 700; font-size: 14px; white-space: nowrap; }
.woocommerce .mh-catalogo__seccion ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .woocommerce .mh-catalogo__seccion ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .woocommerce .mh-catalogo__seccion ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }