@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 700;
  /* 'optional' evita el swap a mitad de vista: si la fuente no llegó en ~100ms
     usa el fallback para esa carga y NO reflow. Con el preload (assets.php) la
     fuente casi siempre llega a tiempo. Antes ('swap') el chip del modelo se
     estiraba unos mm en hard reload al pasar de sans-serif a la condensada. */
  font-display: optional;
  src: url('../fonts/barlow-condensed-700-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  /* optional (no swap): evita que los títulos condensados reescriban a mitad de
     carga. Si está cacheada se usa al instante; si no, se queda el fallback SIN
     reflow. Se precarga en inc/modules/header-racing/assets.php. */
  font-display: optional;
  src: url('../fonts/barlow-semi-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  /* optional: ver nota en el peso 600. Precargada (assets.php). */
  font-display: optional;
  src: url('../fonts/barlow-semi-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  /* optional + preload: es "REPUESTOS PARA" (above-the-fold); con swap saltaba
     al cargar. Ver inc/modules/header-racing/assets.php. */
  font-display: optional;
  src: url('../fonts/inter-600-italic.woff2') format('woff2');
}

/* ============================================================
   HEADER RACING — tokens del prototipo (referencia/Buscador Racing)
   Diagonales: NO tocar sin decisión de diseño.
   ============================================================ */
.mh-racing {
  --mh-accent: #E11414;
  --mh-yellow: #F4C21B;
  --mh-ink: #17171a;
  --mh-dark-1: #2c2c30;
  --mh-dark-2: #232327;
  --mh-dark-3: #18181b;
  --mh-chip-bg: #34343a;
  --mh-muted: #8a8a93;
  --mh-meta: #9a9aa2;
  --mh-line: #ededf0;
  --mh-surface: #eef0f2;
  --mh-ok: #1F9D57;
  --mh-out: #D12A2A;
  --mh-back: #B26A00;
  position: relative;
  z-index: 50;
  font-family: 'Barlow', system-ui, sans-serif;
}
.mh-racing *, .mh-racing *::before, .mh-racing *::after { box-sizing: border-box; }
/* En el home (desktop) SOLO la sub-barra translúcida cuelga sobre el hero
   (46px): efecto Malossi sin tapar el banner con todo el header. */
@media (min-width: 901px) {
  body.home .mh-tier3 { margin-bottom: -46px; }
  /* Sticky Malossi: al bajar, tier1+tier2 (122px) se esconden y la
     sub-barra queda fija; al subir, JS agrega .mh-reveal y el header
     completo se asoma. En el tope de la página, todo normal. */
  .mh-racing {
    position: sticky; top: -122px;
    transition: top .28s ease;
  }
  .mh-racing.mh-reveal { top: 0; }
  @media (prefers-reduced-motion: reduce) {
    .mh-racing { transition: none; }
  }
}
.mh-racing a { text-decoration: none; }
.mh-racing button { font: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.mh-racing :focus-visible { outline: 2px solid var(--mh-accent); outline-offset: 2px; }
/* Los inputs de texto siempre matchean :focus-visible (hasta con click):
   el anillo rojo ahí es ruido — la caja del buscador ya es la señal. */
.mh-racing input:focus, .mh-racing input:focus-visible { outline: none; }

/* ---- nivel 1 (negra translúcida, alta, letras Malossi) ---- */
.mh-tier1 {
  height: 54px;
  background: rgba(13, 13, 15, .9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
/* La nav de Malossi es Graphik Semibold Italic (grotesca limpia, no Druk):
   Inter 600 italic es el pariente libre — itálica real, sin skew. */
.mh-tier1-nav {
  display: flex; align-items: center; gap: 22px;
  font-family: 'Inter', 'Barlow', sans-serif;
  font-style: italic; font-weight: 600;
  font-size: 15.5px; letter-spacing: 1.2px;
}
.mh-tier1-nav a {
  color: #e9e9ec; position: relative; z-index: 1; padding: 8px 2px;
}
.mh-tier1-nav a:hover { color: #fff; }
/* Raya roja bajo el ítem al pasar el mouse (Malossi). */
.mh-tier1-nav a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px;
  height: 3px; background: var(--mh-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .18s ease;
}
.mh-tier1-nav a:hover::after, .mh-tier1-nav a:focus-visible::after { transform: scaleX(1); }
/* La raya roja ES el indicador de foco -> sin anillo (se quedaba pegado en
   MOTOS USADAS al abrir en pestaña nueva). */
.mh-tier1-nav a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .mh-tier1-nav a::after { transition: none; } }
.mh-dot { color: var(--mh-yellow); font-size: 15px; }
.mh-burger, .mh-m-logo, .mh-m-cart, .mh-m-stripe, .mh-mobile-menu { display: none; }

/* ---- nivel 2 ---- */
.mh-tier2 {
  height: 68px; background: #fff;
  display: flex; align-items: center;
  padding: 0 34px 0 244px; gap: 18px;
}
.mh-search {
  flex: 1; max-width: 1100px;
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 18px;
  background: var(--mh-surface); border-radius: 9px;
}
.mh-search-ico { color: var(--mh-muted); flex: none; }
.mh-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: 'Barlow', sans-serif; font-size: 16px; font-weight: 500; color: #2a2a2e;
}
.mh-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mh-search-clear { color: #77777f; display: flex; flex: none; }
.mh-search-clear[hidden] { display: none; }
.mh-tier2-nav {
  display: flex; align-items: center; gap: 14px; margin-left: 20px;
  font-weight: 600; font-size: 15.5px;
}
.mh-tier2-nav a { color: #2a2a2e; }
.mh-tier2-nav a:hover { color: var(--mh-accent); }
.mh-tier2-nav span { color: #cfcfd6; }
.mh-account { color: #3a3a3e; display: flex; }

/* ---- nivel 3 (DIAGONALES) ---- */
/* Translúcida estilo Malossi: lo que quede detrás se ve pasar. */
.mh-tier3 {
  height: 46px; background: rgba(30, 30, 34, .78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex; align-items: stretch; position: relative;
}
.mh-redtab {
  margin-left: 200px; background: var(--mh-accent);
  display: flex; align-items: center; padding: 0 44px;
  transform: skewX(-16deg);
}
.mh-redtab span {
  transform: skewX(8deg);
  font-family: 'Inter', 'Barlow Semi Condensed', sans-serif;
  font-style: italic; font-weight: 600;
  font-size: 16.5px; letter-spacing: 1px; color: #fff;
  white-space: nowrap;
}
.mh-fit { display: flex; align-items: stretch; }
/* Mismo segmento gris del modelo fijado: los dos estados pesan igual. */
.mh-racing .mh-fit-select {
  display: flex; align-items: center;
  padding: 0 26px 0 30px; margin-left: -8px;
  background: #46464b;
  transform: skewX(-16deg);
}
.mh-fit-select .inner {
  display: flex; align-items: center; gap: 10px;
  transform: skewX(16deg);
  font-family: 'Barlow Condensed', sans-serif; font-style: italic;
  font-weight: 700; font-size: 21px; letter-spacing: .8px; color: #fff;
  white-space: nowrap;
}
.mh-fit-select .inner i {
  color: var(--mh-accent); font-style: normal; font-size: 20px;
  transition: transform .18s ease;
}
/* Hover sobrio: el segmento aclara apenas y la flecha se desliza. */
.mh-racing .mh-fit-select { transition: background-color .18s ease; }
.mh-racing .mh-fit-select:hover { background: #55555c; }
.mh-fit-select:hover .inner i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .mh-fit-select .inner i { transition: none; }
  .mh-fit-select:hover .inner i { transform: none; }
}
/* Segmento ancho estilo Malossi: gris a toda la altura, misma diagonal
   que la pestaña roja (skewX(-16deg)), texto grande condensado itálico. */
.mh-fit-chip {
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px 0 30px; margin-left: -8px;
  background: #46464b;
  transform: skewX(-16deg);
}
.mh-fit-chip .name {
  display: inline-block; transform: skewX(16deg);
  font-family: 'Barlow Condensed', sans-serif; font-style: italic;
  font-weight: 700; font-size: 21px; letter-spacing: .8px; color: #fff;
  text-transform: uppercase;
  white-space: nowrap; max-width: min(520px, 38vw); overflow: hidden; text-overflow: ellipsis;
}
.mh-fit-chip { transition: background-color .18s ease; }
.mh-fit-chip:hover { background: #55555c; }
.mh-racing .mh-fit-dots {
  transform: skewX(16deg);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mh-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; flex: none;
}
.mh-fit-dots:hover { filter: brightness(1.15); }
.mh-fit-menu {
  position: absolute; top: 44px; z-index: 60;
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  min-width: 170px;
}
.mh-fit-menu button {
  display: block; width: 100%; text-align: left;
  padding: 11px 16px; font-weight: 600; font-size: 14px; color: var(--mh-ink);
}
.mh-fit-menu button:hover { background: #f4f4f6; }
.mh-fit-menu button.danger { color: var(--mh-accent); }
.mh-tier3-gap { flex: 1; }
.mh-tier3-nav { display: flex; align-items: center; gap: 24px; }
.mh-tier3-nav a {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600; font-size: 14px; letter-spacing: .5px; color: #cfcfd6;
}
.mh-tier3-nav a:hover { color: #fff; }
.mh-cart { display: flex; align-items: center; padding: 0 34px; position: relative; color: #e6e6ea; }
.mh-cart-badge {
  position: absolute; top: 3px; right: 24px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--mh-accent); color: #fff;
  font-weight: 700; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- bloque del logo (DIAGONAL) ---- */
.mh-logoblock {
  position: absolute; left: 0; top: 0; z-index: 3;
  /* 168 = 54+68+46 (tier1 creció a 54); misma pendiente del prototipo:
     (244-200)/156 -> en 168px la diagonal cae en x=196. */
  height: 168px; width: 244px; background: #fff;
  clip-path: polygon(0 0, 244px 0, 196px 168px, 0 168px);
  display: flex; align-items: center; justify-content: flex-start;
  padding: 8px 46px 8px 12px;
}
.mh-logoblock img { max-width: 100%; max-height: 148px; object-fit: contain; }

/* ---- takeover ---- */
.mh-takeover[hidden] { display: none; }
.mh-takeover {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  top: var(--mh-top, 156px);
  background: radial-gradient(1100px 520px at 50% -12%, #ffffff 0%, #f5f5f7 58%, #eeeef1 100%);
  display: flex; flex-direction: column;
  animation: mh-ov .25s ease both;
}
@keyframes mh-ov { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mh-takeover { animation: none; } }
html.mh-locked, html.mh-locked body { overflow: hidden; }

.mh-tabs {
  flex: none; display: flex; justify-content: center; gap: 36px;
  border-bottom: 1px solid #e7e7ea;
  max-width: 1200px; width: 100%; margin: 0 auto; padding-top: 8px;
}
.mh-tab {
  display: flex; align-items: center; gap: 9px;
  padding: 16px 4px; margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  transition: border-color .12s;
}
.mh-tab .t {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700; font-size: 18px; letter-spacing: .4px; color: #8a8a90;
}
.mh-tab .n {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: #ececef; color: #77777f; font-weight: 700; font-size: 12px;
}
.mh-tab.on { border-bottom-color: var(--mh-accent); }
.mh-tab.on .t { color: var(--mh-ink); }
.mh-tab.on .n { background: var(--mh-accent); color: #fff; }

.mh-results { flex: 1; overflow-y: auto; }
.mh-results-inner { max-width: 1040px; margin: 0 auto; padding: 8px 40px 60px; }
.mh-count {
  text-align: center; padding: 26px 0 10px;
  font-size: 16px; color: var(--mh-muted);
}
.mh-count b {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; color: var(--mh-ink);
}
.mh-count .q { color: var(--mh-ink); }

.mh-row {
  display: flex; align-items: center; gap: 22px;
  padding: 20px 18px; width: 100%;
  border-bottom: 1px solid var(--mh-line);
  cursor: pointer; position: relative; color: inherit;
  transition: background .12s ease;
}
.mh-row:hover { background: rgba(0, 0, 0, .022); }
.mh-row.kb { background: rgba(225, 20, 20, .06); box-shadow: inset 3px 0 0 var(--mh-accent); }
.mh-row mark { background: none; color: var(--mh-accent); font-weight: 800; }

.mh-thumb {
  width: 88px; height: 88px; flex: none; border-radius: 12px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.mh-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mh-thumb.model {
  background: repeating-linear-gradient(125deg, #1c1c22 0 9px, #24242b 9px 18px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .5px; color: #e6e6ea;
}
.mh-thumb.product {
  background: repeating-linear-gradient(125deg, #ececef 0 9px, #f5f5f7 9px 18px);
  box-shadow: inset 0 0 0 1px #e6e6ea;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #a0a0a8;
}
.mh-main { flex: 1; min-width: 0; }
.mh-crumb { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.mh-crumb .path { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; color: var(--mh-meta); }
.mh-crumb .sep { color: #cfcfd6; font-size: 12px; }
.mh-chip {
  padding: 3px 10px; border-radius: 5px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: 1px;
}
.mh-chip.model { background: var(--mh-yellow); color: var(--mh-ink); }
.mh-chip.product { background: transparent; border: 1px solid #d8d8dd; color: #77777f; }
.mh-title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700; font-size: 22px; color: var(--mh-ink);
  line-height: 1.15; letter-spacing: .2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mh-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .6px; color: var(--mh-meta); margin-top: 6px; }
.mh-side { flex: none; display: flex; align-items: center; gap: 16px; padding-left: 20px; }
.mh-mcount {
  padding: 7px 14px; border-radius: 999px; background: #f1f1f3; color: #44444a;
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap;
}
.mh-arrow { font-size: 22px; color: #c9c9cf; }
.mh-pricebox { text-align: right; }
.mh-old { font-size: 14px; color: #b6b6bc; text-decoration: line-through; font-weight: 500; }
.mh-price { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 20px; color: var(--mh-ink); line-height: 1.1; }
.mh-price.sale { color: var(--mh-accent); }
.mh-stock { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .4px; }
.mh-stock.instock { color: var(--mh-ok); }
.mh-stock.outofstock { color: var(--mh-out); }
.mh-stock.backorder { color: var(--mh-back); }

.mh-noresults { padding: 70px 20px; text-align: center; }
.mh-noresults .t1 { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 26px; color: var(--mh-ink); }
.mh-noresults .t2 { font-size: 16px; color: var(--mh-muted); margin-top: 8px; }

.mh-tkfoot {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 22px;
  padding: 16px; border-top: 1px solid #e7e7ea; flex-wrap: wrap;
  font-size: 13px; color: var(--mh-muted); background: #fafafb;
}
.mh-kbd-hints { display: flex; gap: 22px; }
.mh-kbd-hints > span { display: flex; align-items: center; gap: 7px; }
.mh-tkfoot kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: #f1f1f3; border: 1px solid #e2e2e6; border-radius: 5px;
  color: #77777f; font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
#mh-viewall {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700; letter-spacing: .4px; color: var(--mh-accent);
}

/* ============================================================
   MÓVIL (≤900px)
   ============================================================ */
@media (max-width: 900px) {
  /* Barra del logo BLANCA (como el header viejo): el logo está diseñado para
     fondo claro (texto/banderas negros), así se lee nítido y grande. */
  .mh-tier1 {
    height: 66px; background: #fff;
    justify-content: space-between; padding: 0 16px;
    border-bottom: 1px solid #ececee;
  }
  .mh-tier1-nav, .mh-logoblock, .mh-tier2-nav, .mh-account,
  .mh-redtab, .mh-tier3-nav, .mh-cart { display: none; }

  .mh-burger {
    display: flex; flex-direction: column; gap: 5px; width: 26px;
  }
  .mh-burger span { height: 2px; background: #1c1c20; border-radius: 2px; }
  .mh-burger span:last-child { width: 70%; }
  .mh-m-logo { display: flex; align-items: center; }
  .mh-m-logo img { display: block; height: 52px; width: auto; }
  .mh-m-cart { display: flex; position: relative; color: #1c1c20; }
  .mh-m-cart .mh-cart-badge { top: -5px; right: -6px; }

  .mh-mobile-menu {
    background: var(--mh-dark-3); padding: 6px 0 12px;
  }
  .mh-mobile-menu:not([hidden]) { display: block; }
  .mh-mobile-menu a {
    display: block; padding: 13px 22px; min-height: 44px;
    color: #e9e9ec; font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600; font-size: 16px; letter-spacing: .5px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .mh-m-stripe { display: block; height: 4px; background: var(--mh-accent); }

  .mh-tier2 { height: auto; padding: 14px 16px 10px; }
  .mh-search { max-width: none; border-radius: 11px; }

  .mh-tier3 {
    height: auto; padding: 12px 16px; align-items: center; gap: 9px;
  }
  /* En móvil el solape de desktop (-46px) no aplica; el padding-top del
     contenedor dejaba ~15px de aire entre la barra y el banner. Pegado. */
  body.home .page-container { padding-top: 0; }
  .mh-tier3::before {
    content: "REPUESTOS PARA";
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 1.2px; color: #86868e; flex: none;
  }
  .mh-fit { margin-left: 0; min-width: 0; flex: 1; align-items: center; }
  .mh-racing .mh-fit-select { font-size: 17px; min-height: 44px; padding: 0; margin: 0; background: none; transform: none; }
  /* La condensada itálica se ve "torcida" en móvil: derecha y sobria.
     transform:none quita también el contra-skew del .inner (si no, queda
     inclinado al lado contrario al no tener el skew del padre en móvil). */
  .mh-fit-select .inner, .mh-fit-chip .name { font-style: normal; letter-spacing: .3px; transform: none; }
  .mh-fit-chip { background: transparent; padding: 0; margin: 0; height: auto; flex: 1; min-width: 0; transform: none; }
  .mh-fit-chip .name { transform: none; max-width: none; flex: 1; font-size: 18px; }
  .mh-racing .mh-fit-dots { transform: none; }
  .mh-fit-menu { top: auto; margin-top: 44px; right: 16px; }
  .mh-tier3-gap { display: none; }

  .mh-tabs {
    justify-content: flex-start; gap: 8px; padding: 12px 16px 10px;
    overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--mh-line);
    background: #fff;
  }
  .mh-tabs::-webkit-scrollbar { display: none; }
  .mh-tab {
    flex: none; gap: 7px; padding: 8px 14px; margin: 0;
    border: 0; border-radius: 999px; background: #f1f1f3; min-height: 38px;
  }
  .mh-tab .t { font-size: 14px; color: #55555c; }
  .mh-tab .n { min-width: 19px; height: 19px; font-size: 11px; background: #dcdce0; color: #66666d; }
  .mh-tab.on { background: var(--mh-ink); }
  .mh-tab.on .t { color: #fff; }

  .mh-results { background: #fff; }
  .mh-results-inner { padding: 8px 0 24px; }
  .mh-count { font-size: 14px; padding: 14px 16px 4px; }
  .mh-row { gap: 13px; padding: 13px 16px; align-items: flex-start; flex-wrap: wrap; }
  .mh-thumb { width: 68px; height: 68px; }
  /* precio/conteo debajo del título, alineado con el texto (no junto al chip) */
  .mh-side { width: 100%; justify-content: flex-start; padding-left: 81px; margin-top: -4px; }
  .mh-crumb { margin-bottom: 2px; }
  .mh-crumb .path, .mh-crumb .sep { display: none; }
  .mh-crumb .mh-meta { margin: 0; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mh-title {
    font-size: 16px; line-height: 1.2; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .mh-side { padding-left: 0; gap: 10px; }
  .mh-main { display: flex; flex-direction: column; gap: 5px; }
  .mh-meta { margin-top: 0; }
  .mh-mcount { padding: 5px 11px; font-size: 13px; }
  .mh-arrow { color: var(--mh-accent); font-size: 16px; }
  .mh-pricebox { display: flex; align-items: center; gap: 10px; text-align: left; }
  .mh-price { font-size: 17px; }
  .mh-old { font-size: 13px; }
  .mh-kbd-hints { display: none; }
}

/* ============================================================
   MODAL "SELECCIONA UN MODELO" (referencia visual: Malossi)
   ============================================================ */
.mh-modal-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(10, 10, 14, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px;
  animation: mh-ov .2s ease both;
}
.mh-modal-backdrop[hidden] { display: none; }
.mh-modal {
  position: relative;
  width: 100%; max-width: 500px;
  background: rgba(28, 28, 33, .96);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 26px 28px 24px;
  color: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.mh-modal-close {
  position: absolute; top: 14px; right: 14px;
  color: #9a9aa2; padding: 6px; display: flex;
}
.mh-modal-close:hover { color: #fff; }
.mh-modal-title {
  margin: 0 0 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic; font-weight: 700;
  font-size: 26px; letter-spacing: .6px; color: #fff;
}
.mh-modal-sub { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #b9b9c0; }
.mh-modal-search {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px;
  background: #fff; border-radius: 9px; color: #55505b;
}
.mh-modal-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: 'Barlow', sans-serif; font-size: 15.5px; font-weight: 600; color: #2a2a2e;
}
.mh-modal-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mh-modal-q-clear { color: #8a8a93; display: flex; flex: none; }
.mh-modal-q-clear[hidden] { display: none; }
.mh-modal-remove {
  display: flex; align-items: center; gap: 8px;
  margin-top: 13px; color: #d8d3ce;
  font-size: 14px; font-weight: 600;
}
.mh-modal-remove:hover { color: var(--mh-accent); }
.mh-modal-remove[hidden] { display: none; }
.mh-modal-results { margin-top: 6px; max-height: 260px; overflow-y: auto; }
.mh-modal-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 13px; margin-top: 8px; min-height: 44px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px; text-align: left; color: #fff;
  transition: background .12s, border-color .12s;
}
.mh-modal-row:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); }
.mh-modal-row .name {
  flex: 1; min-width: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .4px;
  text-transform: uppercase;
}
.mh-modal-row .name mark { background: none; color: var(--mh-yellow); font-weight: inherit; }
.mh-modal-row .n { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #9a9aa2; }
.mh-modal-row .go { flex: none; color: var(--mh-accent); font-size: 18px; }
.mh-modal-empty { padding: 16px 4px 6px; font-size: 13.5px; color: #9a9aa2; }
.mh-modal-recent-title {
  margin: 18px 0 2px;
  font-size: 15px; font-weight: 600; color: #d8d3ce;
}
@media (max-width: 600px) {
  .mh-modal-backdrop { padding: 5vh 10px 10px; }
  .mh-modal { padding: 22px 18px 18px; }
}