/* ============================================================
   mhp.css — hoja propia del tema mhp2026 (Mundo Herbolario Pro)
   Fase 0: estilos extraídos de los .tpl (inline BDG) + base.
   — Claudia, 2026-07-27
   ============================================================ */

:root {
  /* Verdes SACADOS DEL PROPIO LOGO (SVG de la carpeta OneDrive Claudia/Logos MH):
     #6ea441 = letras · #4a703b = sombra · #308002 = globo. El verde manda;
     el marino es solo un toque de profundidad (Fernando, 28-jul).
     Ojo contraste: #6ea441 sobre blanco da 2,9:1 → solo decorativo o texto
     grande; para botones y barras con texto blanco, --mhp-verde-oscuro (5,9:1). */
  --mhp-verde: #6ea441;        /* verde del logo */
  --mhp-verde-oscuro: #4a703b; /* el que lleva texto blanco encima */
  --mhp-verde-hoja: #308002;   /* verde vivo del globo, para degradados */
  --mhp-verde-claro: #eef5e6;  /* fondos suaves */
  --mhp-marino: #001133;       /* azul marino: solo acento/profundidad */
  --mhp-azul: #001133;         /* acentos/links: marino */
  --mhp-azul-oscuro: #015883;
  --mhp-gris-borde: #e3e3e3;
  --mhp-gris-fondo: #f7f7f5;
  --mhp-texto: #333;
  --mhp-radio: 8px;
}

/* ---------- Botón "Ver/Ocultar Precio de Compra" (antes inline en product.tpl y product-list.tpl) ---------- */
/* Fuera el azul cyan heredado: botón discreto en verde de marca — Claudia, 28-jul-2026 */
.BDGVerMiPrecio {
  text-align: center;
  border-radius: var(--mhp-radio);
  border: 1px solid var(--mhp-verde-oscuro);
  padding: 10px;
  color: var(--mhp-verde-oscuro);
  background: #fff;
  line-height: 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, color .15s ease;
}
.BDGVerMiPrecio:hover { background: var(--mhp-verde-oscuro); color: #fff; }

/* ---------- Caja "Precio de Compra" ---------- */
.divPrecioOcultoBDG {
  position: relative;
  top: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  border: 1px solid var(--mhp-verde);
  border-radius: var(--mhp-radio);
}
.precioOcultoBDGPrecio { text-align: center; font-weight: bold; font-size: 16px; }
.divPrecioOcultoBDGIVA { text-align: center; font-size: 12px; }
.hiddenPrecioMayorista { display: none; }

/* ---------- Buscador superior (antes anchos/altos inline en blocksearch-top.tpl) ---------- */
#search_block_top { padding-left: 0; padding-right: 0; }
#search_block_top form { display: flex; align-items: stretch; gap: 0; }
#search_block_top .mhp-search-brand {
  height: 45px;
  max-width: 34%;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: var(--mhp-radio) 0 0 var(--mhp-radio);
  font-size: 12px;
  padding: 0 6px;
  flex: 0 0 auto;
}
#search_block_top .search_query {
  flex: 1 1 auto;
  height: 45px;
  min-width: 0;
  margin: 0;
  border-radius: 0;
}
#search_block_top .button-search { border-radius: 0 var(--mhp-radio) var(--mhp-radio) 0; }
@media (max-width: 767px) {
  #search_block_top form { flex-wrap: wrap; gap: 4px; }
  #search_block_top .mhp-search-brand { max-width: 100%; width: 100%; border-radius: var(--mhp-radio); }
  #search_block_top .search_query { border-radius: var(--mhp-radio) 0 0 var(--mhp-radio); }
}

/* ---------- Base Fase 0 (suave; el rediseño gordo entra por fases) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--mhp-azul);
  outline-offset: 1px;
}

/* ============================================================
   Fase 1 — Login B2B (privateshop) — Claudia, 2026-07-27
   ============================================================ */
body#module-privateshop-login { margin: 0; background: #fff; }
body#module-privateshop-login .container { width: auto; padding: 0; }

.mhp-login {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  font-family: "Open Sans", Arial, sans-serif;
}

/* Banda inferior "Alta como cliente" (feedback Celia 27-jul) */
.mhp-login-alta-banda {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--mhp-marino);
  color: #fff;
  padding: 22px 24px;
}
.mhp-login-alta-banda p { margin: 2px 0; color: #d9e2ef; font-size: 14px; }
.mhp-login-alta-titulo { font-size: 18px; font-weight: 700; color: #fff !important; }
.mhp-btn-alta {
  flex: 0 0 auto;
  background: #fff;
  color: var(--mhp-marino);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .12s ease;
}
.mhp-btn-alta:hover { color: var(--mhp-marino); text-decoration: none; transform: scale(1.04); }

/* --- Panel de marca --- */
.mhp-login-brand {
  flex: 1 1 52%;
  background: linear-gradient(150deg, #f2f7ec 0%, #dcebcd 55%, #c8dfb2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}
.mhp-login-brand-inner { max-width: 480px; }
.mhp-login-logo { max-width: 320px; width: 100%; height: auto; margin-bottom: 28px; mix-blend-mode: multiply; }
.mhp-login-brand h1 {
  font-size: 30px;
  line-height: 1.2;
  color: var(--mhp-verde-oscuro);
  font-weight: 600;
  margin: 0 0 10px;
}
.mhp-login-claim { color: #55684a; font-size: 15px; margin-bottom: 22px; }
.mhp-login-ventajas { list-style: none; margin: 0 0 28px; padding: 0; }
.mhp-login-ventajas li {
  position: relative;
  padding: 6px 0 6px 30px;
  color: #3c4a33;
  font-size: 15px;
}
.mhp-login-ventajas li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mhp-verde);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.mhp-login-alta {
  border-top: 1px solid rgba(62, 107, 42, .25);
  padding-top: 18px;
  color: #3c4a33;
  font-size: 14px;
}
.mhp-login-alta p { margin: 2px 0; }
.mhp-login-contacto a { color: var(--mhp-verde-oscuro); font-weight: 700; text-decoration: none; font-size: 16px; }
.mhp-login-contacto span { color: #55684a; }

/* --- Tarjeta de acceso --- */
.mhp-login-form {
  flex: 1 1 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: #fff;
}
.mhp-login-card { width: 100%; max-width: 400px; }
.mhp-login-card h2 {
  font-size: 24px;
  color: var(--mhp-marino);
  font-weight: 700;
  margin: 0 0 24px;
}
.mhp-login-card label { font-weight: 600; color: #444; font-size: 14px; }
.mhp-login-card .form-group { margin-left: 0; margin-right: 0; padding: 0; }
.mhp-login-card .form-control,
#loginform #email_ajax,
#loginform #passwd_ajax {
  /* privateshop.css los clava a 250/370px por ID con !important — doble ID para ganarle */
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 46px !important;
  border-radius: var(--mhp-radio);
  border: 1px solid #ccc;
  box-shadow: none;
  font-size: 15px;
}
.mhp-login-card .form-control:focus { border-color: var(--mhp-verde); }
.mhp-login-opciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 20px;
  font-size: 13px;
}
.mhp-login-recordar { display: flex; align-items: center; font-weight: normal !important; color: #555; cursor: pointer; margin: 0; }
.mhp-login-recordar input { margin: 0 6px 0 0; }
.mhp-login-olvido { color: var(--mhp-azul); text-decoration: none; }
.mhp-login-olvido:hover { text-decoration: underline; }
.mhp-btn-entrar, .mhp-login-entrar {
  display: block;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--mhp-radio);
  background: var(--mhp-verde);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.mhp-btn-entrar:hover, .mhp-login-entrar:hover { background: var(--mhp-verde-oscuro); color: #fff; }
.mhp-login-pie { margin-top: 22px; color: #888; font-size: 12.5px; text-align: center; }
#status-login { margin-bottom: 14px; }

/* --- Móvil: formulario primero, marca después, alta al final --- */
@media (max-width: 860px) {
  .mhp-login { flex-direction: column; }
  .mhp-login-form { order: 1; }
  .mhp-login-brand { order: 2; }
  .mhp-login-alta-banda { order: 3; }
  .mhp-login-brand, .mhp-login-form { flex: none; padding: 28px 20px; }
  .mhp-login-logo { max-width: 220px; }
  .mhp-login-brand h1 { font-size: 22px; }
}

/* --- Escritorio: todo el login en UNA pantalla, sin scroll (Fernando 27-jul) --- */
@media (min-width: 861px) {
  .mhp-login { height: 100vh; overflow: hidden; }
  .mhp-login-brand, .mhp-login-form {
    height: calc(100vh - 88px);
    overflow: auto;
    padding: 22px 28px;
  }
  .mhp-login-alta-banda { min-height: 88px; padding: 12px 24px; gap: 22px; }
  .mhp-login-logo { max-width: 200px; margin-bottom: 12px; }
  .mhp-login-brand h1 { font-size: 23px; margin-bottom: 6px; }
  .mhp-login-claim { font-size: 13.5px; margin-bottom: 12px; }
  .mhp-login-ventajas { margin-bottom: 14px; }
  .mhp-login-ventajas li { padding: 4px 0 4px 28px; font-size: 14px; }
  .mhp-login-ventajas li::before { top: 4px; width: 18px; height: 18px; line-height: 18px; font-size: 11px; }
  .mhp-login-contacto { margin: 0; }
  .mhp-login-card h2 { font-size: 21px; margin: 0 0 14px; }
  .mhp-login-card .form-group { margin-bottom: 10px; }
  .mhp-login-card .form-control { height: 42px; }
  .mhp-login-opciones { margin: 10px 0 14px; }
  .mhp-btn-entrar, .mhp-login-entrar { height: 45px; font-size: 16px; }
  .mhp-login-pie { margin-top: 12px; }
}

/* ============================================================
   Fase 2 — Home B2B — Claudia, 2026-07-27
   ============================================================ */

/* --- Slider --- */
.mhp-slider { position: relative; margin-bottom: 24px; }
.mhp-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--mhp-radio);
}
.mhp-slider-track::-webkit-scrollbar { display: none; }
.mhp-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; }
.mhp-slide img { width: 100%; height: auto; display: block; }
.mhp-slide-desc { position: absolute; bottom: 12px; left: 16px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.mhp-slider-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: #333;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease;
}
.mhp-slider-flecha:hover { background: #fff; }
.mhp-slider-prev { left: 12px; }
.mhp-slider-next { right: 12px; }
.mhp-slider-dots { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; z-index: 2; }
.mhp-slider-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.6);
  margin: 0 4px;
  padding: 0;
  cursor: pointer;
}
.mhp-slider-dots button.activo { background: var(--mhp-verde); }

/* --- Títulos de sección --- */
.mhp-titulo-seccion {
  font-size: 22px;
  font-weight: 600;
  color: var(--mhp-texto);
  margin: 26px 0 14px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--mhp-verde);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mhp-ver-todas { font-size: 14px; color: var(--mhp-azul); text-decoration: none; font-weight: 400; }
.mhp-ver-todas:hover { text-decoration: underline; }

/* --- Accesos rápidos --- */
.mhp-accesos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
.mhp-acceso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--mhp-gris-fondo);
  border: 1px solid var(--mhp-gris-borde);
  border-radius: var(--mhp-radio);
  text-decoration: none;
  color: var(--mhp-texto);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mhp-acceso:hover { border-color: var(--mhp-verde); box-shadow: 0 2px 8px rgba(0,0,0,.08); color: var(--mhp-texto); text-decoration: none; }
.mhp-acceso-icono {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mhp-verde);
  color: #fff;
  font-size: 19px;
  line-height: 40px;
  text-align: center;
}
.mhp-acceso-reorder .mhp-acceso-icono { background: var(--mhp-azul); }
.mhp-acceso-texto { display: flex; flex-direction: column; line-height: 1.25; }
.mhp-acceso-texto small { color: #777; }
@media (max-width: 860px) { .mhp-accesos { grid-template-columns: repeat(2, 1fr); } }

/* --- Marcas foco --- */
.mhp-marcas-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 12px;
  scroll-snap-type: x proximity;
}
.mhp-marca {
  flex: 0 0 150px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: var(--mhp-radio);
  scroll-snap-align: start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mhp-marca:hover { border-color: var(--mhp-verde); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.mhp-marca img { max-width: 120px; max-height: 64px; object-fit: contain; }
.mhp-marca-nombre { font-size: 13px; font-weight: 700; color: var(--mhp-verde-oscuro); text-align: center; padding: 0 8px; }

/* --- Ofertas de la semana --- */
.mhp-ofertas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 991px) { .mhp-ofertas-grid { grid-template-columns: repeat(2, 1fr); } }
.mhp-oferta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: var(--mhp-radio);
  padding: 12px;
  text-decoration: none;
  color: var(--mhp-texto);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mhp-oferta:hover { border-color: var(--mhp-verde); box-shadow: 0 3px 10px rgba(0,0,0,.10); color: var(--mhp-texto); text-decoration: none; }
.mhp-oferta-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #d9230f;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 1;
}
/* Mismas filas que .mhp-card: todas las tarjetas del sitio miden igual
   (Fernando 28-jul) — Claudia, 28-jul-2026 */
.mhp-oferta { display: grid; grid-template-rows: 150px 16px 36px 20px auto; gap: 4px; }
.mhp-oferta img { width: auto; max-width: 100%; max-height: 150px; height: auto; object-fit: contain; margin: 0 auto; }
.mhp-oferta-marca {
  font-size: 11px;
  letter-spacing: .4px;
  color: #98a294;
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mhp-oferta-nombre {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mhp-oferta-pvpr { font-size: 13px; color: var(--mhp-marino); font-weight: 600; margin-bottom: 6px; }
.mhp-oferta-precio { display: block; text-align: center; padding: 6px 4px; }
.mhp-oferta-precio-titulo { display: block; font-size: 11px; color: #666; }
.mhp-oferta-precio s { color: #999; margin-right: 6px; }
.mhp-oferta-precio strong { font-size: 16px; color: var(--mhp-verde-oscuro); }
.mhp-oferta-precio small { display: block; font-size: 10.5px; color: #888; }

/* ============================================================
   Fase 2b — Cabecera y menú modernos — Claudia, 2026-07-27
   ============================================================ */

/* Barra superior (sesión/usuario): azul marino de contraste (Celia 27-jul) */
.nav { background: var(--mhp-marino) !important; }
.nav a, .nav span, #header .nav .header_user_info a { color: #fff; }
.nav .header_user_info a:hover, .nav a:hover { background: rgba(255,255,255,.12); }

/* Zona de logo/buscador/carrito */
.header-container { background: #fff; }
#header { padding-bottom: 6px; }

/* Carrito: de caja negra a pastilla verde */
#header .shopping_cart > a:first-child {
  background: var(--mhp-verde) !important;
  border-radius: var(--mhp-radio);
  transition: background .15s ease;
}
#header .shopping_cart > a:first-child:hover { background: var(--mhp-verde-oscuro) !important; }
#header .shopping_cart > a:first-child b, #header .shopping_cart > a:first-child span { color: #fff; }

/* Buscador: selector de marca y botón en verde corporativo */
#search_block_top .mhp-search-brand { background-color: var(--mhp-verde-oscuro); }
#search_block_top .button-search {
  background: var(--mhp-verde) !important;
  border: none;
  transition: background .15s ease;
}
#search_block_top .button-search:hover { background: var(--mhp-verde-oscuro) !important; }
#search_block_top .search_query { border: 1px solid var(--mhp-gris-borde); border-left: none; }

/* Menú principal: plano, limpio, hover con subrayado verde */
#block_top_menu { background: #fff; }
.sf-contener { border-bottom: 3px solid var(--mhp-verde); }
.sf-menu { border: none !important; }
.sf-menu > li { border: none !important; }
.sf-menu > li > a {
  background: none !important;
  border: none !important;
  color: #333 !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 18px 18px !important;
  position: relative;
  transition: color .15s ease;
}
.sf-menu > li > a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  background: var(--mhp-verde);
  transform: scaleX(0);
  transition: transform .15s ease;
}
.sf-menu > li > a:hover, .sf-menu > li.sfHover > a, .sf-menu > li.sfHoverForce > a {
  color: var(--mhp-verde-oscuro) !important;
  background: none !important;
}
.sf-menu > li > a:hover::after, .sf-menu > li.sfHover > a::after { transform: scaleX(1); }

/* ---------- Desplegable de escritorio: panel ancho a 4 columnas ----------
   Antes: las subcategorías se pisaban unas a otras sobre fondo transparente
   (las anchuras y los flotantes del módulo no encajaban con el menú nuevo).
   Ahora es un panel a todo el ancho del menú, con la subcategoría como
   titular y sus hijas debajo en lista. — Claudia, 28-jul-2026 */
@media (min-width: 768px) {
  /* el panel se ancla al bloque del menú, no a cada pestaña */
  #block_top_menu.sf-contener { position: sticky; overflow: visible; }
  #block_top_menu .sf-menu > li { position: static; }

  #block_top_menu .sf-menu > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto !important;
    max-height: 74vh;
    overflow-y: auto;
    margin: 0;
    padding: 20px 24px !important;
    background: #fff;
    border: 1px solid var(--mhp-gris-borde);
    border-top: 3px solid var(--mhp-verde);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .16);
    columns: 4;
    column-gap: 28px;
  }
  #block_top_menu .sf-menu > li > ul > li {
    float: none !important;
    width: auto !important;
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 16px;
    padding: 0 !important;
    border: none !important;
  }
  #block_top_menu .sf-menu > li > ul > li > a {
    display: block;
    padding: 0 0 5px !important;
    margin-bottom: 5px;
    color: var(--mhp-verde-oscuro) !important;
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--mhp-gris-borde);
    background: none !important;
  }
  #block_top_menu .sf-menu > li > ul > li > a:hover { color: var(--mhp-verde) !important; }

  /* tercer nivel: lista normal debajo de su titular */
  #block_top_menu .sf-menu > li > ul ul {
    display: block !important;
    position: static !important;
    width: auto !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    columns: auto;
  }
  #block_top_menu .sf-menu > li > ul ul li { float: none !important; width: auto !important; padding: 0 !important; }
  #block_top_menu .sf-menu > li > ul ul a {
    display: block;
    padding: 3px 0 !important;
    font-size: 13px;
    color: #4a5348 !important;
    background: none !important;
  }
  #block_top_menu .sf-menu > li > ul ul a:hover { color: var(--mhp-verde-oscuro) !important; text-decoration: underline; }
}

/* ============================================================
   Fase 2c — Home v2: banner responsive, menú con carácter,
   fuera el bloque "Populares" viejo — Claudia, 2026-07-27
   ============================================================ */

/* Banner/GIF de promos responsive. OJO: el GIF de promotionpro cuelga de un
   div SIN clase .banner → regla general: ninguna imagen desborda su
   contenedor (arregla el layout móvil, que se iba a 1170px). */
#page img { max-width: 100%; height: auto; }
.banner img { width: 100%; display: block; }
.banner p { margin: 0; }
.banner a { display: block; }

/* Fuera las pestañas Populares/Novedades de la home (las sustituye
   el bloque "Lo más vendido de nuestras marcas" de mhphome) */
#index #center_column > ul.nav-tabs,
#index #center_column > .tab-content { display: none !important; }

/* --- Menú v2: barra verde degradada, items pill, OFERTAS destacado ---
   OJO: #block_top_menu y .sf-contener son EL MISMO div; el fondo gris
   venía del propio ul.sf-menu (blocktopmenu.css). *)
   — Claudia, 2026-07-27 */
#block_top_menu.sf-contener {
  border-bottom: none;
  background: linear-gradient(100deg, var(--mhp-verde-oscuro) 0%, var(--mhp-verde) 100%);
  border-radius: var(--mhp-radio);
  box-shadow: 0 3px 10px rgba(0,0,0,.14);
  margin-bottom: 12px;
  padding: 0 6px;
  position: sticky;
  top: 0;
  z-index: 900;
}
.sf-menu { background: transparent !important; border: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 7px 4px; margin: 0; }
.sf-menu > li { float: none; position: relative; }
.sf-menu > li > a {
  color: #fff !important;
  /* 10 entradas (7 categorías + MARCAS + OFERTAS + campanita) tienen que caber
     en UNA línea a 1170px (Fernando, 5-ago): pastillas aún más justas */
  padding: 9px 8px !important;
  font-size: 12px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: background .15s ease;
}
.sf-menu > li > a::after { display: none; }
.sf-menu > li > a:hover,
.sf-menu > li.sfHover > a,
.sf-menu > li.sfHoverForce > a {
  background: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
}
/* OFERTAS en rojo POR SU ENLACE, no por posición: al añadir la campanita al
   final, la regla li:last-child pintaba de rojo lo que no era (5-ago). */
.sf-menu > li:last-child > a { background: transparent !important; }
.sf-menu > li > a[href$="/ofertas"] { background: #d9230f !important; color: #fff !important; }
.sf-menu > li > a[href$="/ofertas"]:hover { background: #b71c0c !important; }

/* El grid de productos foco hereda el de ofertas (12 tarjetas, 4 filas de 3 en tablet) */
.mhp-foco-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .mhp-foco-grid { grid-template-columns: repeat(2, 1fr); } }

/* Titular heredado "Servicio Exclusivo…" (módulo editorial) alineado con los títulos nuevos */
#editorial_block_center h1, #editorial_block_center h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--mhp-texto);
  margin: 18px 0 14px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--mhp-verde);
}

/* ============================================================
   Fase 3 — Ficha de producto: los dos precios, bonitos
   (Fernando 28-jul: los dos precios como ahora pero mejor,
    SIN porcentaje de beneficio; descuentos por cantidad arriba)
   — Claudia, 28-jul-2026
   ============================================================ */

/* Orden de la caja de precios: primero lo que paga el profesional,
   debajo el PVPR de referencia y al final el botón de ocultar. */
.content_prices { display: flex; flex-direction: column; }
.content_prices > * { order: 4; }
.content_prices #precioOcultoBDG { order: 1; }
.content_prices > div:not([class]):not([id]) { order: 2; }   /* el bloque del PVPR */
.content_prices .BDGVerMiPrecio { order: 3; }

/* --- Tu precio de compra: la cifra protagonista ---
   OJO: la clase .divPrecioOcultoBDG se reutiliza en las tarjetas de la home y
   del listado; por eso todo esto va acotado a la ficha (.content_prices). */
.content_prices .divPrecioOcultoBDG {
  position: relative;
  top: 0;
  margin: 0 0 10px;
  padding: 12px 16px 10px;
  border: 2px solid var(--mhp-verde);
  border-radius: 12px;
  background: var(--mhp-verde-claro);
}
.content_prices .divPrecioOcultoBDG::before {
  content: "Tu precio de compra";
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--mhp-verde-oscuro);
  margin-bottom: 2px;
}
.content_prices .precioOcultoBDGPrecio { text-align: left; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.content_prices .precioOcultoBDGPrecio > span#ecotax_price_display {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: #24421a;
}
.content_prices .divPrecioOcultoBDGIVA { text-align: left; font-size: 12px; color: #6c7a64; margin-top: 2px; }
.mhp-iva-label {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6c7a64;
  white-space: nowrap;
}

/* Precio anterior tachado y % de descuento (esto SÍ es descuento de compra,
   no margen: el margen no se enseña por decisión de Fernando) */
.precioOcultoBDGPrecio #old_price { order: 3; padding: 0 !important; }
.precioOcultoBDGPrecio #old_price_display .price { text-decoration: line-through; color: #8a9683; font-size: 14px; font-weight: 600; }
.precioOcultoBDGPrecio #reduction_percent,
.precioOcultoBDGPrecio #reduction_amount { order: 4; margin: 0 !important; }
.precioOcultoBDGPrecio #reduction_percent_display,
.precioOcultoBDGPrecio #reduction_amount_display {
  background: #c81e0f;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 999px;
}

/* --- PVPR: referencia, en segundo plano --- */
.content_prices .our_price_display { margin: 0 0 10px; }
.content_prices .our_price_display #our_price_display {
  font-size: 15px;
  font-weight: 600;
  color: #6b7280;
}

/* --- Botón de ocultar: discreto, ya no compite con el precio --- */
.content_prices .BDGVerMiPrecio {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
}

/* --- Botones de compra: fuera el azul cyan del tema viejo, verde de marca --- */
#add_to_cart button,
.exclusive.button,
a.button.ajax_add_to_cart_button,
.button.ajax_add_to_cart_button,
#buy_block .exclusive,
.box-cart-bottom .exclusive,
#crossselling_list .button,
#crossselling_list_car .button,
#productscategory_list .button,
#bxslider1 .button,
.product-box .ajax_add_to_cart_button {
  background: var(--mhp-verde-oscuro) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--mhp-radio) !important;
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 700;
  transition: background .15s ease;
}
#add_to_cart button:hover,
.exclusive.button:hover,
a.button.ajax_add_to_cart_button:hover,
.button.ajax_add_to_cart_button:hover,
.box-cart-bottom .exclusive:hover {
  background: #3a5a2e !important;
  color: #fff !important;
}
#add_to_cart button span, .exclusive.button span { color: #fff !important; }

/* ============================================================
   Ficha a página completa (sin columna izquierda)
   Fernando 28-jul: fuera el árbol de categorías, más moderna,
   los textos largos abajo y aire arriba.
   — Claudia, 28-jul-2026
   ============================================================ */
/* El bloque de arriba es UNA tarjeta blanca (como en Rosana): foto + datos
   + compra. Los textos largos se van al final de la página. */
#product .primary_block {
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 8px;
}
/* Dos columnas como en Rosana: a la izquierda foto + lote; a la derecha
   título, datos y compra, uno debajo de otro. Así no queda el hueco en
   blanco que dejaban las tres columnas. (Fernando 28-jul) */
@media (min-width: 992px) {
  #product .primary_block {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    column-gap: 30px;
    align-items: start;
    margin-left: 0;
    margin-right: 0;
  }
  /* fila 1 = promo dentro de la tarjeta · fila 2 = las dos columnas ·
     fila 3 = descripción corta a lo ancho.
     OJO (repaso de Celia 28-jul): antes el título y la caja de compra eran
     dos celdas distintas y la foto abarcaba las dos filas; CSS Grid reparte
     el sobrante entre las filas que un item abarca, así que en cuanto la
     columna de la foto era la más alta se abría un hueco entre el título y
     el precio. Ahora mhp.js los mete en `.mhp-col-der` y la derecha es UNA
     celda: el hueco ya no puede aparecer. — Claudia, 28-jul-2026 */
  #product .primary_block { row-gap: 0; grid-template-rows: auto auto auto; }
  #product .primary_block > .mhp-promo-ficha { grid-column: 1 / -1; grid-row: 1; }
  #product .primary_block > .pb-left-column {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    max-width: none;
    padding: 0;
  }
  #product .primary_block > .mhp-col-der {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
    padding: 0;
  }
  /* por si el JS no llega a agrupar (navegador antiguo): plan B en dos filas */
  #product .primary_block > .pb-center-column { grid-column: 2; grid-row: 2; width: auto; max-width: none; padding: 0; }
  #product .primary_block > .pb-right-column { grid-column: 2; grid-row: 3; width: auto; max-width: none; padding: 0; }
  #product .mhp-col-der > .pb-center-column,
  #product .mhp-col-der > .pb-right-column { grid-column: auto; grid-row: auto; width: auto !important; float: none !important; }
  /* la caja de compra y lo que cuelga de ella llenan el alto de la columna,
     para que la tarjeta de marca acabe a la altura del "Llévatelo junto" */
  #product .mhp-col-der > .pb-right-column { flex: 1 1 auto; display: flex; flex-direction: column; }

  /* Barra de compra en UNA fila: precio · stock/cantidad · botón.
     Antes iba en dos columnas y dejaba un agujero blanco enorme debajo.
     (Fernando 28-jul: "sigue habiendo mucho hueco en blanco") */
  #product .pb-right-column .box-info-product {
    display: grid;
    grid-template-columns: minmax(230px, 1.15fr) minmax(140px, .7fr) minmax(215px, 1fr);
    gap: 16px 24px;
    align-items: start;
  }
  #product .pb-right-column .content_prices { grid-column: 1; grid-row: 1; }
  #product .pb-right-column .product_attributes { grid-column: 2; grid-row: 1; margin: 0; padding: 0; border: none; }
  #product .pb-right-column .box-cart-bottom { grid-column: 3; grid-row: 1; margin: 0; }
  /* Sin stock: la caja de Avísame ocupa LA MISMA celda que el botón de añadir
     (col 3) — el bloque de compra es un grid y sin celda asignada caía al
     final, "abajo" (Fernando, 5-ago-2026). El JS ya garantiza que nunca están
     los dos a la vez. */
  #product .pb-right-column .mhp-sinstock { grid-column: 3; grid-row: 1; margin: 0; align-self: start; }
  #product .pb-right-column .mhp-descuentos-cantidad { grid-column: 1 / -1; grid-row: 2; margin: 0; }
}

/* Foto contenida (Fernando 28-jul: "hazla más pequeña") */
#product #image-block { width: 100%; height: auto; border: 1px solid var(--mhp-gris-borde); border-radius: 12px; background: #fff; padding: 8px; }
#product #image-block img { max-height: 260px; width: auto; margin: 0 auto; }
#product #views_block { margin-top: 10px; }
#product #thumbs_list li img { border-radius: 8px; }

/* --- Lote "Llévatelo junto" (bajo la foto, patrón Rosana) --- */
.mhp-lote {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--mhp-verde);
  border-radius: 12px;
  background: var(--mhp-verde-claro);
}
.mhp-lote-titulo {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mhp-verde-oscuro);
  text-transform: none;
  background: none;
  padding: 0;
  border: none;
}
.mhp-lote-fila { display: flex; align-items: flex-start; gap: 6px; }
.mhp-lote-mas { align-self: center; font-size: 18px; font-weight: 700; color: var(--mhp-verde-oscuro); }
.mhp-lote-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 8px 6px;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 400;
  transition: border-color .15s ease, opacity .15s ease;
}
.mhp-lote-item:hover { border-color: var(--mhp-verde); }
.mhp-lote-item input { margin: 0; align-self: flex-start; }
.mhp-lote-item.mhp-fuera { opacity: .45; }
.mhp-lote-foto { height: 52px; display: flex; align-items: center; }
.mhp-lote-foto img { max-height: 52px; max-width: 100%; width: auto; }
.mhp-lote-nombre {
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: #4a5348;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mhp-lote-precio { font-size: 12.5px; font-weight: 700; color: var(--mhp-verde-oscuro); }
.mhp-lote-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mhp-lote-total { font-size: 13px; color: #4a5348; }
.mhp-lote-total strong { font-size: 17px; color: #24421a; }
.mhp-lote-total small { display: block; font-size: 10.5px; color: #7b8579; }
.mhp-lote-boton {
  flex: 0 0 auto;
  border: none;
  border-radius: var(--mhp-radio);
  background: var(--mhp-verde-oscuro);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s ease;
}
.mhp-lote-boton:hover { background: #3a5a2e; }
.mhp-lote-boton[disabled] { opacity: .5; cursor: default; }

/* --- MUNDOAHORRO: el descuento acumulado, con protagonismo (Fernando 28-jul).
   El módulo lo pinta en la columna del medio; mhp.js lo sube a la caja de
   compra, debajo del precio, y aquí se le da forma de premio. --- */
.mhp-ahorro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: linear-gradient(100deg, #fff8e1, #fff3cd);
  border: 1px solid #f0d28a;
  border-radius: 10px;
  color: #6b4e00;
  font-size: 12.5px;
  line-height: 1.35;
}
.mhp-ahorro::before {
  /* moneda dibujada con CSS: el emoji no está en las fuentes del sistema
     y salía un cuadrito — Claudia, 28-jul-2026 */
  content: "€";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8b923;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
}
.mhp-ahorro b, .mhp-ahorro strong { color: #8a6100; }
.mhp-ahorro p { margin: 0; }
.mhp-ahorro-titulo { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; color: #8a6100; }

/* Marca en pastilla + código de barras, bajo el título */
.mhp-ficha-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.mhp-marca-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--mhp-verde);
  border-radius: 999px;
  background: var(--mhp-verde-claro);
  color: var(--mhp-verde-oscuro) !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background .15s ease;
}
.mhp-marca-pill span { font-weight: 400; font-size: 12px; opacity: .85; }
.mhp-marca-pill:hover { background: var(--mhp-verde); color: #fff !important; text-decoration: none; }
.mhp-ficha-meta .mhp-ficha-ean { font-size: 12.5px; color: #7b8579; }
/* colocada bajo la tarjeta de compra, no entre el título y el precio */
.mhp-ficha-meta-abajo { margin: 14px 0 0; }

/* Enlace "ver composición" que baja al bloque del final */
.mhp-ir-detalles { margin: 12px 0 0; }
.mhp-ir-detalles a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mhp-verde-oscuro);
  text-decoration: underline;
}

/* Detalles largos: al final de la página y plegados */
#mhp-detalles { margin-top: 26px; }
#mhp-detalles.mhp-plegado > .page-product-box:not(:first-child) { display: none; }
#mhp-detalles.mhp-plegado > .page-product-box:first-child .rte,
#mhp-detalles.mhp-plegado > .page-product-box:first-child #more_info_sheets {
  max-height: 180px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}
.mhp-abrir-detalles {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 11px;
  background: #fff;
  border: 1px solid var(--mhp-verde-oscuro);
  border-radius: var(--mhp-radio);
  color: var(--mhp-verde-oscuro);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.mhp-abrir-detalles:hover { background: var(--mhp-verde-oscuro); color: #fff; }

/* Titular del producto: protagonista */
#product .pb-center-column h1 {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--mhp-texto);
  margin: 0 0 14px;
}
#product .pb-center-column #short_description_block { font-size: 14px; line-height: 1.55; color: #4a5348; }
#product .pb-center-column #short_description_block p { margin-bottom: 8px; }

/* Párrafos que PrestaShop deja vacíos (referencia sin valor, aviso de
   disponibilidad oculto) y que abrían un hueco entre el título y el precio */
#product .pb-center-column #product_reference:empty,
#product .pb-center-column #availability_statut:empty { display: none; }
#product .pb-center-column #product_reference,
#product .pb-center-column #availability_statut { margin: 0; }
#product .pb-center-column { padding-bottom: 0; }
#product .pb-center-column h1 { margin-bottom: 10px; }
#product .mhp-ficha-meta { margin-bottom: 0; }

/* Fuera de la ficha: "Escriba una reseña" y "Añadir a favoritos" — no aportan
   nada en B2B y robaban el sitio del precio (Fernando 28-jul) */
#product #product_comments_block_extra,
#product #usefull_link_block,
#product .usefull_link_block { display: none !important; }

/* La promo de la cabecera, dentro de la tarjeta del producto */
#product .mhp-promo-ficha {
  grid-column: 1 / -1;
  width: 100%;
  margin: -6px 0 18px;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
#product .mhp-promo-ficha img { width: 100%; height: auto; display: block; }
#product .mhp-promo-ficha p { margin: 0; }

/* Los sellos de pago, discretos: no son el protagonista */
#product .box-cart-bottom img { max-height: 22px; width: auto; }
#product .box-cart-bottom .payment_logos, #product .box-cart-bottom p { font-size: 11.5px; color: #98a294; }

/* Caja de compra como tarjeta */
#product .pb-right-column .box-info-product {
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  padding: 16px;
}

/* Bloques de texto largo (composición, modo de empleo, reseñas) abajo y sobrios */
#product .page-product-box { border: 1px solid var(--mhp-gris-borde); border-radius: 12px; margin-top: 22px; }
#product #more_info_block .page-product-heading,
#product .page-product-box > .page-product-heading {
  background: var(--mhp-gris-fondo);
  border: none;
  border-radius: 12px 12px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--mhp-verde-oscuro);
  margin: 0;
  padding: 12px 16px;
}
#product #more_info_sheets, #product .rte { padding: 16px; }
#product #more_info_sheets h2, #product #more_info_sheets h3 { font-size: 16px; font-weight: 700; color: var(--mhp-texto); margin: 14px 0 4px; }

/* ============================================================
   Marcas: listado en rejilla con buscador instantáneo
   (antes: una marca por fila, 957 filas gigantes con "Imagen no
   disponible" y ordenadas por "5 SEASONS", "9 BAR"…)
   — Claudia, 28-jul-2026
   ============================================================ */
/* Fuera la miga de pan y el "Marcas · Hay 957 marcas": el contenido empieza
   arriba del todo (Fernando 28-jul). El contador se OCULTA, no se borra:
   mhp.js lo lee para saber cuántas marcas tiene que cargar. */
/* OJO: el listado de marcas y la página de UNA marca comparten body#manufacturer.
   Se distingue por la rejilla propia con :has(), para no cargarse el titular
   de la página de marca. */
#manufacturer:has(#manufacturers_list) .breadcrumb,
#manufacturer:has(#manufacturers_list) #center_column > h1.page-heading { display: none !important; }
#manufacturer:has(#manufacturers_list) #columns { padding-top: 6px; }
/* la barra de "mostrar 24 por página" sobra: se cargan todas */
#manufacturer:has(#manufacturers_list) .content_sortPagiBar { display: none; }

/* --- Cabecera de la página de una marca --- */
.mhp-marca-cabecera {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 22px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 14px;
}
.mhp-marca-cabecera-dist {
  background: linear-gradient(120deg, var(--mhp-verde-claro) 0%, #f7fbf3 60%, #fff 100%);
  border-color: var(--mhp-verde);
}
.mhp-marca-cabecera-logo {
  flex: 0 0 150px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  padding: 8px;
}
.mhp-marca-cabecera-logo img { max-width: 100%; max-height: 84px; width: auto; }
.mhp-marca-cabecera-texto { flex: 1 1 auto; min-width: 0; }
.mhp-marca-cabecera-texto h1 {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 700;
  color: var(--mhp-texto);
  text-transform: none;
}
.mhp-marca-cabecera-datos { margin: 0 0 8px; font-size: 13.5px; color: #7b8579; display: flex; align-items: center; gap: 10px; }
.mhp-marca-cabecera-datos b { color: var(--mhp-verde-oscuro); }
.mhp-marca-cabecera-stock {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--mhp-verde-claro);
  color: var(--mhp-verde-oscuro);
  font-size: 12.5px;
}
.mhp-marca-sello {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--mhp-verde-oscuro);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.mhp-marca-cabecera-desc { font-size: 13.5px; line-height: 1.5; color: #4a5348; max-height: 84px; overflow: hidden; }
@media (max-width: 767px) {
  .mhp-marca-cabecera { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mhp-marca-cabecera-logo { flex: 0 0 auto; width: 130px; height: 84px; }
  .mhp-marca-cabecera-texto h1 { font-size: 21px; }
}

/* --- Marcas en distribución exclusiva, destacadas arriba --- */
.mhp-distribucion {
  margin: 0 0 28px;
  padding: 20px 22px;
  background: linear-gradient(120deg, var(--mhp-verde-claro) 0%, #f7fbf3 60%, #fff 100%);
  border: 1px solid var(--mhp-verde);
  border-radius: 14px;
}
.mhp-distribucion-cab h2 {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 700;
  color: var(--mhp-verde-oscuro);
}
.mhp-distribucion-cab p { margin: 0 0 16px; font-size: 13.5px; color: #55684a; }
.mhp-distribucion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.mhp-distribucion-card {
  display: grid;
  grid-template-rows: 76px auto auto;
  gap: 6px;
  padding: 14px 12px;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: var(--mhp-texto) !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mhp-distribucion-card:hover {
  border-color: var(--mhp-verde);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
  transform: translateY(-2px);
  text-decoration: none;
}
.mhp-distribucion-logo { position: relative; display: flex; align-items: center; justify-content: center; }
.mhp-distribucion-logo img { max-height: 76px; max-width: 100%; width: auto; position: relative; z-index: 1; background: #fff; }
.mhp-distribucion-nombre { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.mhp-distribucion-sello {
  justify-self: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--mhp-verde-oscuro);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.mhp-marcas-titulo { font-size: 18px; font-weight: 700; color: var(--mhp-texto); margin: 0 0 12px; }
.mhp-marcas-buscador { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
#mhp-filtro-marcas {
  flex: 1 1 auto;
  max-width: 420px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: var(--mhp-radio);
  font-size: 15px;
}
#mhp-filtro-marcas:focus { border-color: var(--mhp-verde); outline: none; }
.mhp-marcas-contador { font-size: 13px; color: #7b8579; }

/* --- Abecedario --- */
.mhp-abecedario {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mhp-gris-borde);
}
.mhp-letra {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 8px;
  background: #fff;
  color: var(--mhp-texto);
  font-size: 13px;
  font-weight: 700;
  line-height: 30px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.mhp-letra:hover:not([disabled]) { border-color: var(--mhp-verde); color: var(--mhp-verde-oscuro); }
.mhp-letra.activa { background: var(--mhp-verde-oscuro); border-color: var(--mhp-verde-oscuro); color: #fff; }
.mhp-letra[disabled] { opacity: .3; cursor: default; }
.mhp-letra-todas { min-width: 62px; }

.mhp-marcas-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.mhp-marca-card { margin: 0; }
.mhp-marca-card > a {
  display: grid;
  grid-template-rows: 70px auto auto;
  gap: 6px;
  height: 100%;
  padding: 14px 12px;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: var(--mhp-texto) !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mhp-marca-card > a:hover {
  border-color: var(--mhp-verde);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .09);
  transform: translateY(-2px);
  text-decoration: none;
}
.mhp-marca-card-logo { position: relative; display: flex; align-items: center; justify-content: center; }
.mhp-marca-card-logo img { max-height: 70px; max-width: 100%; width: auto; position: relative; z-index: 1; background: #fff; }
/* si no hay logo, las dos primeras letras hacen de marca de agua */
.mhp-marca-card-inicial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--mhp-verde);
  opacity: .35;
  text-transform: uppercase;
}
.mhp-marca-card-nombre { font-size: 13px; font-weight: 700; line-height: 1.2; }
.mhp-marca-card-n { font-size: 11.5px; color: #98a294; }
.mhp-marca-card.mhp-oculta { display: none; }

/* ============================================================
   Mi cuenta — de botones grises con iconos naranjas a tarjetas
   — Claudia, 28-jul-2026
   ============================================================ */
#my-account #center_column > .row { display: flex; flex-wrap: wrap; }
#my-account .myaccount-link-list { list-style: none; padding: 0; margin: 0; }
#my-account .myaccount-link-list li { margin: 0 0 12px; }
#my-account .myaccount-link-list li a {
  display: flex !important;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  color: var(--mhp-texto) !important;
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#my-account .myaccount-link-list li a:hover {
  border-color: var(--mhp-verde);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
  text-decoration: none;
}
#my-account .myaccount-link-list li a i {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--mhp-verde-claro);
  color: var(--mhp-verde-oscuro);
  font-size: 18px;
  line-height: 42px;
  text-align: center;
  border: none;
  margin: 0;
  padding: 0;
}
/* el tema pintaba una caja gris dentro del botón y el icono en naranja */
#my-account .myaccount-link-list li a { background-image: none !important; box-shadow: none !important; }
#my-account .myaccount-link-list li a span {
  line-height: 1.25;
  flex: 1 1 auto;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  position: static !important;
  overflow: visible !important;
  display: block !important;
  width: auto !important;
}
/* el icono venía posicionado en absoluto: en flex tiene que ser uno más,
   si no el texto se le mete debajo y se corta */
#my-account .myaccount-link-list li a i {
  position: static !important;
  float: none !important;
  background: var(--mhp-verde-claro) !important;
  color: var(--mhp-verde-oscuro) !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   Mis pedidos (historial) — Fernando 28-jul: "repetir pedido se ve mal,
   aparece abajo del todo" + "poner la dirección donde se envió".
   — Claudia, 28-jul-2026
   ============================================================ */
#history #order-list, #order-detail #order-list {
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
#history #order-list thead th {
  background: var(--mhp-gris-fondo);
  border: none;
  padding: 12px 14px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #6b7280;
}
#history #order-list tbody td {
  border: none;
  border-top: 1px solid var(--mhp-gris-borde);
  padding: 14px;
  vertical-align: middle;
  background: #fff;
}
#history #order-list tbody tr:hover td { background: #fbfcfa; }
#history .history_link a { color: var(--mhp-verde-oscuro); font-weight: 700; }
#history .history_price .price { font-weight: 700; color: #24421a; font-size: 15px; }

/* Dirección de envío: calle y ciudad, no el alias suelto */
#history .history_direccion { line-height: 1.35; }
#history .mhp-dir-linea { display: block; font-weight: 600; font-size: 13px; }
#history .mhp-dir-ciudad { display: block; font-size: 12.5px; color: #6b7280; }
#history .mhp-dir-alias {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--mhp-verde-claro);
  color: var(--mhp-verde-oscuro);
  font-size: 11px;
  font-weight: 700;
}

/* Repetir pedido: botón, y el primero */
#history .history_detail { white-space: nowrap; text-align: right; }
#history .mhp-btn-repetir {
  display: inline-block;
  padding: 9px 14px;
  border-radius: var(--mhp-radio);
  background: var(--mhp-verde-oscuro);
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background .15s ease;
}
#history .mhp-btn-repetir:hover { background: #3a5a2e; color: #fff !important; text-decoration: none; }
#history .mhp-btn-detalle {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mhp-verde-oscuro) !important;
  text-decoration: none;
}
#history .mhp-btn-detalle:hover { text-decoration: underline; }

@media (max-width: 767px) {
  /* de tabla a fichas: en el móvil una tabla de 7 columnas no se lee */
  #history #order-list, #history #order-list tbody, #history #order-list tr, #history #order-list td { display: block; width: 100%; }
  #history #order-list thead { display: none; }
  #history #order-list tbody tr {
    border: 1px solid var(--mhp-gris-borde);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  #history #order-list tbody td { border-top: none; padding: 8px 14px; }
  #history #order-list tbody td:first-child { padding-top: 14px; }
  #history .history_detail { text-align: left; padding-bottom: 14px !important; }
  #history .mhp-btn-repetir { display: block; text-align: center; }
  #history .mhp-btn-detalle { display: block; margin: 10px 0 0; }
}

/* ============================================================
   Carrusel de recomendación (ficha) — tarjetas TODAS iguales
   Fernando 28-jul: "que todos los bloques tengan la misma altura
   y ancho, tipo slider, y nada sin stock delante".
   — Claudia, 28-jul-2026
   ============================================================ */
.mhp-carrusel { margin: 30px 0 0; }
.mhp-carrusel-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 3px solid var(--mhp-verde);
}
.mhp-carrusel-titulo { font-size: 20px; font-weight: 700; color: var(--mhp-texto); margin: 0; }
.mhp-carrusel-sub { margin: 2px 0 0; font-size: 13px; color: #7b8579; }
.mhp-carrusel-acciones { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mhp-carrusel-flecha {
  width: 34px;
  height: 34px;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 50%;
  background: #fff;
  color: var(--mhp-verde-oscuro);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.mhp-carrusel-flecha:hover { background: var(--mhp-verde-oscuro); border-color: var(--mhp-verde-oscuro); color: #fff; }
.mhp-carrusel-flecha[disabled] { opacity: .3; cursor: default; }
.mhp-carrusel-flecha[disabled]:hover { background: #fff; color: var(--mhp-verde-oscuro); border-color: var(--mhp-gris-borde); }

.mhp-carrusel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 14px) / 5);   /* 5 tarjetas a la vista */
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.mhp-carrusel-track::-webkit-scrollbar { display: none; }

/* La tarjeta: rejilla de filas fijas para que TODAS midan lo mismo,
   pase lo que pase con el largo del nombre. */
.mhp-card {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: 150px 16px 38px 20px auto 16px;
  gap: 4px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  text-decoration: none;
  color: var(--mhp-texto);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mhp-card:hover {
  border-color: var(--mhp-verde);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--mhp-texto);
}
.mhp-card-img { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mhp-card-img img { max-width: 100%; max-height: 150px; width: auto; object-fit: contain; }
.mhp-card-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: #c81e0f;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 999px;
}
.mhp-card-marca {
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #98a294;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mhp-card-nombre {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mhp-card-pvpr { font-size: 12.5px; color: #7b8579; }
.mhp-card-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--mhp-verde-claro);
  border-radius: 8px;
  padding: 6px 8px;
}
.mhp-card-precio small { flex: 1 1 100%; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--mhp-verde-oscuro); font-weight: 700; }
.mhp-card-precio s { color: #9aa694; font-size: 12.5px; }
.mhp-card-precio strong { font-size: 17px; color: #24421a; }
.mhp-card-stock { font-size: 11.5px; color: var(--mhp-verde-oscuro); font-weight: 600; }

@media (max-width: 1199px) { .mhp-carrusel-track { grid-auto-columns: calc((100% - 3 * 14px) / 4); } }
@media (max-width: 991px)  { .mhp-carrusel-track { grid-auto-columns: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 767px)  {
  .mhp-carrusel-track { grid-auto-columns: 62%; }
  .mhp-carrusel-flecha { display: none; }
  .mhp-carrusel-titulo { font-size: 17px; }
  .mhp-card { grid-template-rows: 120px 16px 36px 18px auto 16px; }
  .mhp-card-img img { max-height: 120px; }
}

/* --- Recomendadores de la ficha: mismo lenguaje que la home --- */
#crossselling.page-product-box .mhp-titulo-seccion,
.blockproductscategory .mhp-titulo-seccion,
.mhp-mas-marca .mhp-titulo-seccion {
  background: none;
  border-bottom: 3px solid var(--mhp-verde);
  padding: 0 0 8px;
  margin: 24px 0 14px;
  font-size: 19px;
  font-weight: 600;
  color: var(--mhp-texto);
  text-transform: none;
}
.mhp-mas-marca { border: none; padding: 0; }
.mhp-mas-marca .mhp-ofertas-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .mhp-mas-marca .mhp-ofertas-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Descuentos por cantidad, ahora arriba y legibles --- */
.mhp-descuentos-cantidad .page-product-box { border: none; margin: 0 0 14px; padding: 0; }
.mhp-descuentos-cantidad .page-product-heading {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--mhp-verde-oscuro);
  border: none;
  background: none;
  margin: 0 0 6px;
  padding: 0;
}
.mhp-descuentos-cantidad table.table-product-discounts {
  width: 100%;
  margin: 0;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 10px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
/* --- Ahorro por cantidad: banda destacada, no una tablita perdida ---
   Fernando 28-jul: "que se vea bien, parecido a Rosana pero que no se note
   que es lo mismo". Aquí es una banda verde con la escalera de precios,
   clicable: al pulsar un tramo se pone esa cantidad en el carrito.
   — Claudia, 28-jul-2026 */
.mhp-descuentos-cantidad {
  background: linear-gradient(100deg, var(--mhp-verde-claro), #f7fbf3);
  border: 1px solid var(--mhp-verde);
  border-radius: 12px;
  padding: 12px 14px;
}
/* (4-ago-2026: esta banda se oculta al final del fichero, bloque E1) */
.mhp-descuentos-cantidad .page-product-heading::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: -3px;
  border-radius: 50%;
  background: var(--mhp-verde-oscuro);
  box-shadow: 5px 0 0 -1px var(--mhp-verde), 10px 0 0 -2px rgba(110, 164, 65, .5);
}
.mhp-descuentos-cantidad .mhp-dto-gancho {
  display: block;
  font-size: 13px;
  color: #4a5348;
  margin: 0 0 8px;
}
.mhp-descuentos-cantidad .mhp-dto-gancho b { color: var(--mhp-verde-oscuro); }

/* La columna de compra es estrecha: la tabla de 3 columnas no cabía y se
   cortaba. Se convierte en líneas "N uds. o más → X €/ud." y se esconde la
   tercera columna, que repetía el mismo precio. */
.mhp-descuentos-cantidad thead { display: none; }
.mhp-descuentos-cantidad table.table-product-discounts,
.mhp-descuentos-cantidad tbody { display: block; width: 100%; }
.mhp-descuentos-cantidad tbody tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 9px 10px;
  border-top: 1px solid var(--mhp-gris-borde);
  background: #fff;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.mhp-descuentos-cantidad tbody tr:first-child { border-top: none; }
.mhp-descuentos-cantidad tbody tr:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--mhp-verde); }
.mhp-descuentos-cantidad tbody tr::after {
  content: "Aplicar";
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--mhp-verde-oscuro);
  opacity: 0;
  transition: opacity .15s ease;
}
.mhp-descuentos-cantidad tbody tr:hover::after { opacity: 1; }
.mhp-descuentos-cantidad tbody td {
  display: inline;
  padding: 0;
  border: none !important;   /* table.std pinta líneas verticales */
  background: none;
  font-size: 13px;
  white-space: nowrap;
}
.mhp-descuentos-cantidad tbody td:first-child { font-weight: 700; }
.mhp-descuentos-cantidad tbody td:first-child::after {
  content: "+ uds.";
  font-weight: 400;
  font-size: 12.5px;
  color: #6b7280;
}
.mhp-descuentos-cantidad tbody td:nth-child(2) {
  font-weight: 700;
  color: var(--mhp-verde-oscuro);
  white-space: nowrap;
}
/* sin coletilla "/ud.": la columna de compra es estrecha y se cortaba;
   el encabezado "Descuentos por volumen" ya lo deja claro */
.mhp-descuentos-cantidad tbody td:nth-child(3) { display: none; }

/* ============================================================
   Fase 2d — Cabecera compacta + menú móvil de verdad
   (Fernando 28-jul: "el verde manda, el azul solo un toque";
    "los menús en el móvil se solapan")
   — Claudia, 28-jul-2026
   ============================================================ */

/* ---------- Barra superior (sesión): fina y marino ---------- */
.nav {
  background: var(--mhp-marino) !important;
  font-size: 13px;
}
/* OJO Bootstrap: .row lleva :before/:after de clearfix y al poner display:flex
   se convierten en items fantasma que descolocan la fila. Fuera. */
.nav .container > .row:before, .nav .container > .row:after,
.mhp-header-main .row:before, .mhp-header-main .row:after { display: none !important; }

/* El contenido de la barra cuelga de <nav>, no de .row: es ahí donde hay que
   poner el flex para que sesión y usuario vayan en UNA línea. */
.nav .container > .row > nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.nav .header_user_info { float: none !important; width: auto !important; padding: 0; }
.nav .header_user_info a { padding: 6px 12px !important; display: inline-block; line-height: 18px; }

/* ---------- Zona principal: logo | buscador | carrito en UNA fila,
     y el menú a lo ancho debajo. OJO: el menú, la capa del carrito y los
     banners de módulos cuelgan de ESTA MISMA .row (vienen por HOOK_TOP),
     así que hay que ordenarlos a mano o se cuelan en medio. ---------- */
.mhp-header-main { padding: 10px 0 6px; }
.mhp-header-main .row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-left: 0;
  margin-right: 0;
}
.mhp-header-main .row > * { order: 5; }           /* resto (banners, capas) al final */
.mhp-header-main #header_logo { order: 1; }
.mhp-header-main #search_block_top { order: 2; }
.mhp-header-main .col-sm-4 { order: 3; }
.mhp-header-main #block_top_menu { order: 4; flex: 0 0 100%; width: 100%; }
.mhp-header-main #header_logo {
  float: none !important;
  width: auto;
  max-width: 270px;
  flex: 0 0 auto;
  padding: 0 !important;
  margin: 0;
}
.mhp-logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mhp-logo-full { width: 235px; height: auto; max-width: 100%; }
.mhp-logo-simbolo, .mhp-logo-texto { display: none; }

/* OJO: search y carrito traen anchos de Bootstrap en % (col-sm-8 / col-sm-4)
   que sumados al logo pasaban del 100% y tiraban el carrito a otra línea. */
.mhp-header-main #search_block_top {
  float: none !important;
  flex: 1 1 320px;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.mhp-header-main .col-sm-4 {
  float: none !important;
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  padding: 0;
}
.mhp-header-main .shopping_cart { float: none !important; margin: 0; position: relative; z-index: 1200; }
/* el desplegable del carrito se metía POR DEBAJO de la barra del menú
   (que va sticky con z-index 900) — Fernando, 28-jul */
#header .cart_block, #header .shopping_cart .cart_block {
  z-index: 1300 !important;
  border: 1px solid var(--mhp-gris-borde);
  border-top: 3px solid var(--mhp-verde);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}
.mhp-header-main .col-sm-4 { position: relative; z-index: 1200; }

/* ---------- Menú de escritorio: pastillas verdes (se mantiene) ---------- */
#block_top_menu.sf-contener {
  background: linear-gradient(100deg, var(--mhp-verde-oscuro) 0%, var(--mhp-verde) 100%);
}

/* ============================================================
   MÓVIL (≤767px) — el JS del módulo pasa a modo móvil justo aquí:
   .cat-title despliega ul.menu-content y cada .menu-mobile-grover
   abre su submenú. Nuestro flex de pastillas rompía ese layout y
   los textos pisaban los "+". Aquí se deshace el flex y se pone
   una lista vertical de verdad.
   ============================================================ */
@media (max-width: 767px) {

  /* --- Cabecera compacta: símbolo + nombre, no el logo gigante --- */
  .mhp-header-main { padding: 6px 0 4px; }
  .mhp-header-main .row { flex-wrap: wrap; gap: 8px; justify-content: space-between; }
  /* el logo NO puede crecer o empuja el carrito a otra línea */
  .mhp-header-main #header_logo { flex: 0 1 auto; padding: 4px 0 !important; margin: 0 !important; }
  .mhp-logo-full { display: none; }
  .mhp-logo-simbolo { display: block; width: 38px; height: 38px; }
  .mhp-logo-texto {
    display: flex;
    flex-direction: column;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--mhp-verde-oscuro);
    font-family: "Open Sans", Arial, sans-serif;
  }
  .mhp-logo-texto small {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--mhp-marino);
  }

  /* Orden en móvil: logo+carrito arriba, buscador debajo, menú al final */
  .mhp-header-main #header_logo { order: 1; }
  .mhp-header-main .col-sm-4 { order: 2; }
  .mhp-header-main #search_block_top { order: 3; flex: 1 1 100%; }
  .mhp-header-main #block_top_menu { order: 4; }

  /* Buscador: una sola fila (marca + texto + lupa), sin partirse en dos */
  #search_block_top form { flex-wrap: nowrap; gap: 0; }
  #search_block_top .mhp-search-brand {
    width: auto;
    max-width: 38%;
    height: 42px;
    border-radius: var(--mhp-radio) 0 0 var(--mhp-radio);
    font-size: 11.5px;
  }
  #search_block_top .search_query { height: 42px; border-radius: 0; }
  #search_block_top .button-search { height: 42px; }

  /* Carrito: pastilla compacta al lado del logo, no una fila entera */
  .mhp-header-main .col-sm-4 { flex: 0 0 auto; align-self: center; }
  #header .shopping_cart { width: auto; padding: 0 !important; margin: 0 !important; }
  #header .shopping_cart > a:first-child { margin: 0 !important; }
  #header .shopping_cart > a:first-child {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 14px !important;
    white-space: nowrap;
  }
  /* En 390px no caben logo + "Carrito vacío": se deja icono + nº de artículos,
     que es lo que de verdad se mira. */
  #header .shopping_cart > a:first-child b { display: none; }
  #header .shopping_cart > a:first-child .ajax_cart_no_product { display: none; }
  #header .shopping_cart > a:first-child .ajax_cart_quantity,
  #header .shopping_cart > a:first-child .ajax_cart_product_txt { font-size: 13px; font-weight: 700; }
  #header .shopping_cart > a:first-child .icon-shopping-cart,
  #header .shopping_cart > a:first-child .shopping_cart_icon { font-size: 20px; }

  /* --- MENÚ: botón de verdad + lista vertical --- */
  #block_top_menu.sf-contener {
    position: static;
    padding: 0;
    margin-bottom: 14px;
    overflow: hidden;
    background: var(--mhp-verde-oscuro);
  }
  #block_top_menu .cat-title {
    background: var(--mhp-verde-oscuro) !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 14px 54px 14px 16px !important;
    font-size: 16px !important;
    letter-spacing: .5px;
    margin: 0;
  }
  #block_top_menu .cat-title:hover { background: var(--mhp-verde-oscuro) !important; color: #fff !important; }
  #block_top_menu .cat-title:after { right: 18px; top: 14px; font-size: 20px; color: #fff; }

  /* Se deshace el flex de pastillas: lista vertical a lo ancho.
     SIN !important a propósito: el JS del módulo abre y cierra el menú con
     slideToggle, que escribe display en el style del elemento; un !important
     aquí dejaría el menú abierto para siempre. */
  .sf-menu {
    display: block;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  /* Plegado por defecto: el menú abierto se comía media pantalla antes de
     llegar al contenido. Lo abre el botón MENÚ. */
  #block_top_menu ul.sf-menu.menu-content { display: none; }
  .sf-menu > li {
    display: block !important;
    float: none !important;
    width: 100%;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
  }
  /* Alto de fila FIJO con flex: así el botón "+" (que va absoluto) encaja
     exacto con la fila y no queda ni alto ni bajo. */
  .sf-menu > li > a {
    display: flex !important;
    align-items: center;
    min-height: 52px;
    width: 100%;
    border-radius: 0 !important;
    /* el hueco de la derecha es del "+": aquí estaba el solape */
    padding: 8px 58px 8px 16px !important;
    font-size: 14.5px;
    line-height: 1.25;
    text-transform: none;
    white-space: normal;
  }
  /* OFERTAS: en móvil, franja roja a lo ancho (no pastilla flotando) */
  .sf-menu > li:last-child > a {
    background: #c81e0f !important;
    font-weight: 700;
    letter-spacing: .5px;
  }

  /* El "+" de cada categoría: su propia zona táctil, sin pisar el texto */
  .sf-menu .menu-mobile-grover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    width: 54px;
    /* alto FIJO igual al de la fila: con height:100% el botón se estiraba por
       todo el submenú abierto y pintaba una columna oscura hasta abajo */
    height: 52px;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, .12);
    border-left: 1px solid rgba(255, 255, 255, .18);
    cursor: pointer;
    z-index: 2;
  }
  .sf-menu .menu-mobile-grover:before,
  .sf-menu .menu-mobile-grover:after {
    content: "";
    position: absolute;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .sf-menu .menu-mobile-grover:before { width: 16px; height: 2.5px; }
  .sf-menu .menu-mobile-grover:after { width: 2.5px; height: 16px; transition: transform .15s ease, opacity .15s ease; }
  .sf-menu .menu-mobile-grover.active:after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

  /* Submenús: fondo más oscuro para que se vea el nivel.
     Fuera cajas blancas, bordes y sombras del módulo (son de escritorio). */
  .sf-menu ul.menu-mobile,
  .sf-menu ul.menu-mobile ul,
  .sf-menu li ul {
    background: rgba(0, 0, 0, .16);
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    position: static !important;
    float: none !important;
  }
  .sf-menu ul.menu-mobile ul { background: rgba(0, 0, 0, .12); }
  /* el li del submenú traía padding de escritorio (0 15px 20px 0) que
     descuadraba la fila y el botón "+" */
  .sf-menu ul.menu-mobile li {
    border-top: 1px solid rgba(255, 255, 255, .12);
    position: relative;
    float: none;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }
  .sf-menu ul.menu-mobile a {
    display: flex;
    align-items: center;
    min-height: 46px;
    color: #fff !important;
    padding: 7px 52px 7px 28px !important;
    font-size: 13.5px;
    line-height: 1.3;
    background: none !important;
    text-transform: none;
  }
  .sf-menu ul.menu-mobile ul a { padding-left: 44px !important; font-size: 13px; opacity: .92; }
  .sf-menu ul.menu-mobile a:hover { background: rgba(255, 255, 255, .12) !important; }

  /* Acordeón propio del 3er nivel (lo monta mhp.js).
     Con !important porque el tema trae reglas de más peso que lo dejaban
     abierto; aquí es seguro: el estado se cambia por clase, no por style. */
  .sf-menu ul.menu-mobile ul.mhp-cerrado { display: none !important; }
  .mhp-grover2 {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 46px !important;
    height: 46px !important;
    cursor: pointer;
    z-index: 2;
    background: rgba(0, 0, 0, .14);
    border-left: 1px solid rgba(255, 255, 255, .12);
  }
  /* Un solo símbolo: se dibuja como TEXTO (+ / −) desde mhp.js.
     Los pseudo-elementos van anulados a la fuerza porque el tema le colaba
     un segundo "+" gris de FontAwesome heredado. — Fernando, 28-jul */
  .mhp-grover2:before, .mhp-grover2:after { content: none !important; display: none !important; }
  .mhp-grover2 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 400;
    color: #fff !important;
    opacity: .9;
  }

  /* Títulos de sección y rejillas, un punto más compactos */
  .mhp-titulo-seccion { font-size: 18px; margin: 20px 0 12px; }
  .mhp-marca { flex: 0 0 118px; height: 68px; }
}

/* ============================================================
   REPASO DE CELIA (28-jul-2026) — cabecera, menú, home y footer
   Correcciones 1 a 4 del repaso que pasó Fernando por Teams.
   — Claudia, 28-jul-2026
   ============================================================ */

/* --- 4. Buscador y carrito desalineados ---------------------------------
   El tema le mete `padding-top:50px` a .shopping_cart (venía de la maqueta
   vieja, con el carrito colgando bajo el logo): el bloque medía 96px de alto
   y la pastilla caía 24px por debajo del buscador. Se anula y las dos piezas
   miden 45px y se centran en la fila. */
#header .mhp-header-main .shopping_cart {
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  height: 45px;
}
#header .mhp-header-main .shopping_cart > a:first-child {
  display: flex !important;
  align-items: center;
  gap: 9px;
  height: 45px;
  padding: 0 16px !important;
  margin: 0 !important;
  line-height: 1;
}
#header .mhp-header-main .shopping_cart > a:first-child b,
#header .mhp-header-main .shopping_cart > a:first-child span { line-height: 1; }
/* la flechita del desplegable, centrada con el resto */
#header .mhp-header-main .shopping_cart > a:first-child .icon-caret-down,
#header .mhp-header-main .shopping_cart > a:first-child i { line-height: 1; margin: 0; }

/* --- 4b. Selector "Todas las Marcas": centrado raro y flecha lejísimos ---
   Era un <select> nativo de 205px (lo estiraba el nombre de marca más largo)
   con el texto a la izquierda y la flecha del sistema pegada al borde. Ahora:
   ancho fijo, texto centrado y flecha propia justo al lado del texto. */
#search_block_top .mhp-search-brand {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex: 0 0 172px;
  width: 172px;
  max-width: 172px;
  padding: 0 24px 0 10px;
  text-align: center;
  text-align-last: center;
  font-size: 12.5px;
  /* chevron blanco dibujado en SVG: sin él vuelve la flecha del sistema */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 6px;
}
/* las opciones del desplegable sí se leen alineadas a la izquierda */
#search_block_top .mhp-search-brand option { text-align: left; color: #333; background: #fff; }

/* --- 4c. Desplegable del carrito: era casi negro ------------------------
   Fondo #484848 heredado del tema. Se pasa a tarjeta blanca, que es lo que
   pega con la cabecera nueva (Celia: "queda muy oscuro, aclararlo"). */
#header .cart_block,
#header .cart_block .block_content,
#header .cart_block .cart_block_list,
#header .cart_block .cart-prices,
#header .cart_block .cart-buttons {
  background: #fff !important;
  color: var(--mhp-texto) !important;
}
#header .cart_block { border: 1px solid var(--mhp-gris-borde); border-top: 3px solid var(--mhp-verde); }
#header .cart_block dt, #header .cart_block dd,
#header .cart_block .cart-prices-line, #header .cart_block p, #header .cart_block span {
  color: var(--mhp-texto) !important;
  border-color: var(--mhp-gris-borde) !important;
}
#header .cart_block a { color: var(--mhp-texto) !important; }
#header .cart_block a:hover { color: var(--mhp-verde-oscuro) !important; }
#header .cart_block .price, #header .cart_block .cart_block_product_price { color: #24421a !important; font-weight: 700; }
#header .cart_block .cart-prices .cart-prices-line.last-line span { color: #24421a !important; }
#header .cart_block dt { border-bottom: 1px solid var(--mhp-gris-borde); }
#header .cart_block .remove_link a, #header .cart_block .ajax_cart_block_remove_link { color: #b0b7ab !important; }
#header .cart_block .remove_link a:hover { color: #c81e0f !important; }
#header .cart_block .cart-buttons a.btn,
#header .cart_block .cart-buttons #button_order_cart {
  background: var(--mhp-verde-oscuro) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mhp-radio) !important;
}

/* --- 1. Menú desplegable: las categorías SIN hijas quedaban raras -------
   (28-jul) Se pintaban como pastilla verde para que no parecieran cabeceras
   huérfanas.
   (4-ago) CAMBIO DE CRITERIO de Celia: las quiere TODAS IGUALES, tengan o no
   subcategorías — mayúsculas y flecha en las nueve. La pastilla se retira; la
   regla se deja aquí, neutralizada, para que se vea que fue una decisión y no
   un olvido. — Claudia, 4-ago-2026 */

/* --- 3. Bloques de la columna izquierda: fuera el negro, entra el marino;
   y los "+" del árbol de categorías en verde ----------------------------- */
#left_column .block .title_block,
#left_column .block h2.title_block,
#categories_block_left .title_block {
  border-top: 3px solid var(--mhp-marino);
  background: var(--mhp-gris-fondo);
  color: var(--mhp-texto);
  font-weight: 600;
  letter-spacing: .3px;
}
/* el "+"/"−" del árbol: el tema lo pinta con un sprite gris y lo deja como
   bloque suelto encima del enlace. Se devuelve a su sitio (derecha de la
   fila) y se dibuja como texto verde. */
#categories_block_left .tree .grower {
  background: none !important;
  background-image: none !important;
  border: none !important;
  float: right !important;
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  margin: -2px 0 0 !important;
  padding: 0 !important;
  font: 700 18px/26px Arial, Helvetica, sans-serif !important;
  text-align: center;
  text-indent: 0 !important;
  color: var(--mhp-verde) !important;
  cursor: pointer;
}
/* OJO: el pseudo-elemento del tema hereda FontAwesome y un "+" normal sale
   como cuadradito — el mismo problema que ya dio el menú móvil. La fuente hay
   que forzarla EN EL PSEUDO-ELEMENTO. — Claudia, 28-jul-2026 */
#categories_block_left .tree .grower::before {
  content: "+" !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
  color: var(--mhp-verde) !important;
}
#categories_block_left .tree .grower::after { content: none !important; display: none !important; }
#categories_block_left .tree .grower.OPEN { color: var(--mhp-verde-oscuro) !important; }
#categories_block_left .tree .grower.OPEN::before { content: "−" !important; color: var(--mhp-verde-oscuro) !important; }
#categories_block_left .tree li { overflow: hidden; }
#categories_block_left .tree a:hover { color: var(--mhp-verde-oscuro); }

/* --- 2. La columna de categorías, a ras con los accesos rápidos ---------
   El bloque de la izquierda arrancaba 30px por debajo de los botones
   "Repetir último pedido / Ofertas / Novedades / Más vendidos". */
#index #left_column { padding-top: 0; }
#index #left_column > .block:first-child { margin-top: 0; }
#index #left_column .block .title_block { margin-top: 0; }
.mhp-accesos { margin-top: 0; }
#index #center_column { padding-top: 0; }

/* --- 3b. Bloque final de la home (#cmsinfo_block) en la línea nueva ----- */
#cmsinfo_block {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 30px 0 0;
  padding: 24px 26px;
  background: var(--mhp-gris-fondo);
  border: 1px solid var(--mhp-gris-borde);
  border-top: 3px solid var(--mhp-marino);
  border-radius: 14px;
  /* El tema viejo (global.css) le clava height:344px + overflow:hidden y
     guillotinaba la columna izquierda a media frase ("NOVEDAD EN EL
     SERVICIO…") — lo vio Fernando el 1-ago-2026. Que crezca lo que haga
     falta. — Claudia, 1-ago-2026 */
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
#cmsinfo_block > .col-xs-6 { flex: 1 1 340px; width: auto; float: none; padding: 0; }
#cmsinfo_block ul { list-style: none; margin: 0; padding: 0; }
#cmsinfo_block ul > li { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
#cmsinfo_block em[class^="icon-"] {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mhp-verde) !important;
  color: #fff !important;
  font-size: 19px;
  line-height: 44px;
  text-align: center;
  margin: 0;
}
#cmsinfo_block .type-text { flex: 1 1 auto; min-width: 0; }
#cmsinfo_block h3, #cmsinfo_block h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--mhp-marino);
  text-transform: none;
}
#cmsinfo_block h3 strong, #cmsinfo_block h4 strong { font-weight: 700; }
#cmsinfo_block p, #cmsinfo_block li p { font-size: 13.5px; line-height: 1.5; color: #4a5348; margin: 0 0 4px; }
/* la columna de "¿POR QUÉ MUNDO HERBOLARIO?" es una lista numerada */
#cmsinfo_block ol { margin: 0; padding-left: 20px; }
#cmsinfo_block ol > li { display: list-item; margin-bottom: 8px; color: var(--mhp-verde-oscuro); }
#cmsinfo_block ol > li p { color: #4a5348; }
#cmsinfo_block > .col-xs-6:last-child > h3 {
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 3px solid var(--mhp-verde);
  font-size: 18px;
}

/* --- 3b-bis. Carrito: "Te recomendamos" con tarjetas IGUALES ------------ */
/* Fernando (1-ago-2026): mismo alto y mismo ancho para todos. El bloque va
   dentro de un carrusel (bxSlider pone el ancho de cada li por JS): NO se
   toca la maquetación del slider, solo se uniforma la tarjeta — caja de
   imagen de altura fija, título con altura reservada y precio + botón
   siempre al pie. Acotado al carrito (body#order / #order-opc). */
#order #crossselling_list_car > li.product-box,
#order-opc #crossselling_list_car > li.product-box {
  display: flex;
  flex-direction: column;
  /* 356px absorbe hasta 3 líneas de descripción ("descatalogado…"): con
     menos, esa tarjeta salía más alta y desalineaba el botón. */
  min-height: 356px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 10px;
}
#order #crossselling_list_car .product-image,
#order-opc #crossselling_list_car .product-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 140px;
  margin: 0 0 8px;
}
#order #crossselling_list_car .product-image img,
#order-opc #crossselling_list_car .product-image img {
  max-width: 100%;
  max-height: 140px;
  width: auto;
  height: auto;
}
/* el título crece y empuja precio y botón al pie: todas las tarjetas igual */
#order #crossselling_list_car .s_title_block,
#order-opc #crossselling_list_car .s_title_block {
  flex: 1 1 auto;
  min-height: 34px;
}
#order #crossselling_list_car .price_display,
#order-opc #crossselling_list_car .price_display {
  margin: 6px 0;
  text-align: left;
}
#order #crossselling_list_car .no-print .button,
#order-opc #crossselling_list_car .no-print .button {
  width: 100%;
  text-align: center;
}

/* --- 3c. Footer: mismo idioma que la cabecera (marino, no gris sucio) --- */
.footer-container { background: var(--mhp-marino); border-top: 3px solid var(--mhp-verde); }
.footer-container #footer { color: #d9e2ef; }
.footer-container #footer h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, .18);
}
.footer-container #footer a, .footer-container #footer li a { color: #d9e2ef !important; }
.footer-container #footer a:hover { color: #fff !important; text-decoration: underline; }
.footer-container #footer li { border: none !important; padding: 3px 0 !important; }
.footer-container #footer i, .footer-container #footer em[class^="icon-"] { color: var(--mhp-verde); }
.footer-container #footer .toggle-footer { padding: 0; }
/* boletín: el input gris sobre gris no se veía */
.footer-container #newsletter_block_left .newsletter-input {
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--mhp-radio) 0 0 var(--mhp-radio);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  box-shadow: none;
}
.footer-container #newsletter_block_left .newsletter-input::placeholder { color: #aebbd0; }
.footer-container #newsletter_block_left button {
  height: 40px;
  background: var(--mhp-verde) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 var(--mhp-radio) var(--mhp-radio) 0 !important;
  color: #fff !important;
}
.footer-container #newsletter_block_left button:hover { background: var(--mhp-verde-oscuro) !important; }

/* ============================================================
   REPASO DE CELIA (28-jul-2026) — FICHA DE PRODUCTO
   "Sobre todo, alinear, alinear y alinear".
   — Claudia, 28-jul-2026
   ============================================================ */
@media (min-width: 992px) {
  #product .primary_block { align-content: start; }
  #product .primary_block > .pb-left-column { align-self: start; }
  /* el pie (descripción corta) ocupa las dos columnas */
  #product .primary_block > .mhp-ficha-desc { grid-column: 1 / -1; grid-row: 3; }
  /* el título, pegado a su caja de compra: el tema le metía 30px de margen
     a la columna y 16px de padding al h1 — 46px de aire muerto */
  #product .pb-center-column { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  #product .pb-center-column h1 { margin: 0 0 10px !important; padding: 0 !important; }
}
/* la tarjeta de marca estira hasta igualar el alto del "Llévatelo junto" */
#product .pb-right-column .mhp-marca-ficha { flex: 1 1 auto; }

/* --- Descripción corta al pie de la tarjeta --- */
.mhp-ficha-desc { margin-top: 6px; }
.mhp-ficha-desc #short_description_block { font-size: 14px; line-height: 1.55; color: #4a5348; }

/* --- Caja de compra: fuera sombras y líneas que no pintaban nada --------
   (Celia: "eliminaría sombreados del bloque de stock y del de añadir al
   carrito, no encajan visualmente") */
#product .pb-right-column .box-info-product,
#product .pb-right-column .product_attributes,
#product .pb-right-column .box-cart-bottom,
#product .pb-right-column .box-cart-bottom > div,
#product #add_to_cart button,
#product .box-cart-bottom .exclusive {
  box-shadow: none !important;
  text-shadow: none !important;
}
#product .pb-right-column .product_attributes,
#product .pb-right-column .box-cart-bottom { border: none !important; background: none !important; }

/* --- Botón de compra: icono y texto centrados de verdad ---
   El <p id="add_to_cart"> traía padding y borde del tema: era el rectángulo
   claro que se veía alrededor del botón. */
#product #add_to_cart {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
#product #add_to_cart button,
#product .box-cart-bottom .exclusive {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 10px 12px !important;
  font-size: 15px;
  line-height: 1.2;
}
/* el <span> de dentro traía un borde cian del tema viejo: se veía un
   rectángulo azul recortado dentro del botón verde */
#product #add_to_cart button span,
#product .box-cart-bottom .exclusive span {
  display: inline-block;
  text-align: center;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#product #add_to_cart button i, #product #add_to_cart button .icon-shopping-cart { margin: 0; font-size: 19px; line-height: 1; }
/* El icono del carrito era un sprite del tema viejo con marco cian pegado al
   texto. Se cambia por el de la tipografía de iconos, limpio y centrado.
   — Claudia, 28-jul-2026 */
#product #add_to_cart button span::before,
#product #add_to_cart button span::after { content: none !important; display: none !important; }
#product #add_to_cart button::before {
  content: "\f07a" !important;
  font-family: FontAwesome !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #fff !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  display: inline-block !important;
}
#product #add_to_cart button::after { content: none !important; display: none !important; }

/* --- El "-10%": la píldora roja se pintaba DENTRO de un rectángulo rojo ---
   El <p id="reduction_percent"> traía fondo del tema y el <span> de dentro es
   el nuestro, redondeado. Se quita el cuadrado y se queda la píldora. */
#product #reduction_percent,
#product #reduction_amount,
.precioOcultoBDGPrecio #reduction_percent,
.precioOcultoBDGPrecio #reduction_amount {
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  color: inherit !important;
}

/* --- MUNDOAHORRO separado del botón de ocultar precio (iban pegados) --- */
.content_prices .mhp-ahorro { margin-top: 14px; order: 5; }
.content_prices .BDGVerMiPrecio { margin-bottom: 0; }

/* --- Con el precio de compra oculto, el PVPR manda --- */
.mhp-sin-precio-compra .content_prices .our_price_display #our_price_display {
  font-size: 30px;
  font-weight: 800;
  color: #24421a;
}
.mhp-sin-precio-compra .content_prices .our_price_display { margin-bottom: 4px; }
.mhp-sin-precio-compra #product .content_prices .mhp-ahorro { display: none; }

/* --- Bloque de entrega (sustituye a la marca repetida) --- */
.mhp-entrega { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 0 !important; }
.mhp-entrega-icono {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mhp-verde-claro);
  border: 1px solid var(--mhp-verde);
  position: relative;
}
/* camioncito dibujado con dos rectángulos: no dependemos de FontAwesome */
.mhp-entrega-icono::before {
  content: "";
  position: absolute;
  left: 6px; top: 9px;
  width: 9px; height: 7px;
  background: var(--mhp-verde-oscuro);
  border-radius: 1px;
}
.mhp-entrega-icono::after {
  content: "";
  position: absolute;
  left: 15px; top: 11px;
  width: 5px; height: 5px;
  background: var(--mhp-verde-oscuro);
  border-radius: 1px 2px 1px 1px;
}
.mhp-entrega-icono-espera { background: #fff8e1; border-color: #f0d28a; }
.mhp-entrega-icono-espera::before, .mhp-entrega-icono-espera::after { background: #b98900; }
.mhp-entrega-texto { display: flex; flex-direction: column; line-height: 1.3; }
.mhp-entrega-texto b { font-size: 13.5px; color: var(--mhp-verde-oscuro); }
.mhp-entrega-icono-espera + .mhp-entrega-texto b { color: #8a6100; }
.mhp-entrega-texto small { font-size: 11.5px; color: #7b8579; }
/* Bloque único de ventajas de la ficha: caducidad, volumen y promociones juntas,
   una debajo de otra, con la chapa a la izquierda siempre a la misma altura para
   que se lean en columna. — Claudia, 29-jul-2026 */
.mhp-ventajas { margin: 10px 0 12px; border: 1px solid #e3e8e0; border-radius: 4px; overflow: hidden; }
.mhp-ventaja { display: flex; align-items: baseline; gap: 9px; padding: 6px 10px; font-size: 12.5px; line-height: 1.35; }
.mhp-ventaja + .mhp-ventaja { border-top: 1px solid #eef1ec; }
.mhp-ventaja-chapa {
  flex: 0 0 auto; min-width: 92px; text-align: center; font-size: 10.5px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; color: #fff;
}
.mhp-ventaja-txt { color: #5a6357; }
.mhp-ventaja-txt b { color: #2f3a2c; font-size: 13px; }
.mhp-ventaja-caducidad { background: #fffaf0; }
.mhp-ventaja-caducidad .mhp-ventaja-chapa { background: #b98900; }
.mhp-ventaja-caducidad .mhp-ventaja-txt b { color: #8a6100; }
.mhp-ventaja-volumen { background: #f6faf4; }
.mhp-ventaja-volumen .mhp-ventaja-chapa { background: var(--mhp-verde-oscuro, #2f6b2f); }
.mhp-ventaja-promo { background: #f4f8fb; }
.mhp-ventaja-promo .mhp-ventaja-chapa { background: #205a86; }
/* Carteles de imagen de Celia: son GIF de 280×55 (ficha) y 160×31 (listado).
   Se pintan a su tamaño real; sin este tope el navegador los estiraba a todo
   el ancho de la columna y se veían borrosos. — Claudia, 29-jul-2026 */
.mhp-ventaja-img { display: block; padding: 8px 10px; background: #fff; }
/* El !important es necesario: el CSS general de la ficha lleva una regla con
   #center_column, que gana por especificidad y estiraba el GIF a todo el ancho. */
.mhp-ventajas .mhp-ventaja-img img { display: block; max-width: 280px !important; width: auto; height: auto; }
@media (max-width: 480px) {
  .mhp-ventaja { flex-wrap: wrap; gap: 5px; }
  .mhp-ventaja-chapa { min-width: 0; }
  .mhp-ventajas .mhp-ventaja-img img { max-width: 100% !important; }
}

/* Cartel de oferta por caducidad: ficha y listado. El texto viene del gestor.
   Ámbar, no verde: es urgencia y unidades contadas. — Claudia, 29-jul-2026 */
.mhp-caducidad { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 !important; }
.mhp-caducidad-chapa {
  display: inline-block; background: #b98900; color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px;
}
.mhp-caducidad-txt { font-size: 13px; color: #7a5c00; }
.mhp-caducidad-txt b { color: #8a6100; }
.mhp-caducidad-fec { color: #8a6100; }
.mhp-caducidad-fec:before { content: '· '; color: #c8b487; }
.mhp-cad-lista {
  display: inline-block; margin: 4px 0 2px; padding: 2px 7px; border-radius: 3px;
  background: #fff8e1; border: 1px solid #f0d28a; color: #8a6100; font-size: 11.5px; line-height: 1.5;
}
.mhp-cad-lista b { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* Enlace a las condiciones de envío dentro del bloque de entrega. — Claudia, 29-jul-2026 */
.mhp-entrega-cond { color: var(--mhp-verde-oscuro); text-decoration: underline; white-space: nowrap; }
.mhp-entrega-cond:hover { color: var(--mhp-verde); }

/* El bloque de stock/cantidad, aireado y alineado con el resto */
#product .pb-right-column .product_attributes p { margin: 0 0 8px; }
#product #available_stock_p { font-size: 13.5px; }
#product #quantity_wanted_p label { display: block; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #7b8579; }
#product #producto_properties_p { margin: 6px 0 !important; }

/* Código de barras bajo la caja: discreto, alineado a la izquierda */
#product .mhp-ficha-meta-abajo { margin: 10px 0 0; font-size: 12px; color: #98a294; }

/* --- Tarjeta de marca de la ficha --------------------------------------
   (Celia: "el botón hacia la marca, más grande, con el logo y tipo bloque
   de marca, que ocupe el mismo alto que los bloques de compra") */
.mhp-marca-ficha {
  display: flex;
  gap: 16px;
  margin: 14px 0 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
}
.mhp-marca-ficha-dist { border-color: var(--mhp-verde); background: linear-gradient(120deg, #f7fbf3 0%, #fff 70%); }
.mhp-marca-ficha-logo {
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 10px;
}
.mhp-marca-ficha-logo img { max-width: 100%; max-height: 74px; width: auto; }
.mhp-marca-ficha-inicial { font-size: 24px; font-weight: 800; color: var(--mhp-verde); opacity: .45; }
.mhp-marca-ficha-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mhp-marca-ficha-nombre {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 700;
  color: var(--mhp-texto);
  text-transform: none;
  background: none;
  padding: 0;
  border: none;
}
.mhp-marca-ficha-datos { margin: 0 0 6px; font-size: 12.5px; color: #7b8579; }
.mhp-marca-ficha-datos b { color: var(--mhp-verde-oscuro); }
.mhp-marca-ficha-desc {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #4a5348;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mhp-marca-ficha-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mhp-marca-ficha-cats a {
  padding: 4px 11px;
  border: 1px solid #dde8d2;
  border-radius: 999px;
  background: var(--mhp-verde-claro);
  color: var(--mhp-verde-oscuro) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.mhp-marca-ficha-cats a:hover { background: var(--mhp-verde-oscuro); border-color: var(--mhp-verde-oscuro); color: #fff !important; text-decoration: none; }
/* el único toque de marino de la ficha: el botón que lleva a la marca */
.mhp-marca-ficha-boton {
  margin-top: auto;
  align-self: flex-start;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--mhp-marino);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease;
}
.mhp-marca-ficha-boton:hover { background: #002766; color: #fff !important; text-decoration: none; }
@media (max-width: 991px) {
  .mhp-marca-ficha { flex-direction: column; }
  .mhp-marca-ficha-logo { flex: 0 0 auto; width: 140px; }
}

/* --- Bloque "MÁS INFORMACIÓN": era una caja gris triste --------------- */
#product #mhp-detalles .page-product-box { border: 1px solid var(--mhp-gris-borde); border-radius: 12px; background: #fff; }
#product #mhp-detalles .page-product-heading {
  background: linear-gradient(100deg, var(--mhp-verde-claro), #f7fbf3) !important;
  border-bottom: 1px solid #dde8d2 !important;
  color: var(--mhp-verde-oscuro) !important;
}
#product #mhp-detalles .rte h2, #product #mhp-detalles .rte h3,
#product #mhp-detalles #more_info_sheets h2, #product #mhp-detalles #more_info_sheets h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--mhp-marino);
  margin: 16px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--mhp-gris-borde);
}
#product #mhp-detalles .rte p { font-size: 13.5px; line-height: 1.6; color: #4a5348; }
#product #mhp-detalles .table-data-sheet td { font-size: 13px; }

/* --- Vista rápida (popup): estaba rota ---------------------------------
   El popup NO es un iframe: fancybox mete la ficha en `.fancybox-inner` de
   esta misma página y sin `#product` en el body, así que ninguna regla de la
   ficha le llegaba y quedaban los flotantes del tema — foto minúscula arriba
   y la caja de compra colgando 500px más abajo (la captura de Celia).
   — Claudia, 28-jul-2026 */
.fancybox-inner .primary_block,
body.content_only .primary_block {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  /* la 3ª fila (1fr) se come el sobrante de la foto: sin ella el hueco se
     reparte entre título y caja de compra */
  grid-template-rows: auto auto 1fr;
  align-content: start;
  column-gap: 22px;
  row-gap: 0;
  padding: 18px;
  margin: 0;
  width: auto;
}
.fancybox-inner .primary_block > .pb-left-column,
body.content_only .primary_block > .pb-left-column {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}
.fancybox-inner .primary_block > .pb-center-column,
body.content_only .primary_block > .pb-center-column {
  grid-column: 2;
  grid-row: 1;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.fancybox-inner .primary_block > .pb-right-column,
body.content_only .primary_block > .pb-right-column {
  grid-column: 2;
  grid-row: 2;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}
.fancybox-inner .primary_block .box-info-product,
body.content_only .primary_block .box-info-product {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(120px, .7fr) minmax(180px, 1fr);
  gap: 14px 20px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  padding: 14px;
}
.fancybox-inner #image-block img, body.content_only #image-block img { max-height: 220px; width: auto; margin: 0 auto; }
.fancybox-inner #image-block, body.content_only #image-block {
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  padding: 8px;
}
.fancybox-inner .pb-center-column h1, body.content_only .pb-center-column h1 { font-size: 20px; margin: 0 0 10px !important; padding: 0 !important; }
/* En el popup la columna del medio arrastraba 600px de hooks invisibles
   (avisos de stock, enlaces útiles, el hook de info adicional…) y empujaba la
   caja de compra fuera de la vista. Se deja solo lo que se lee.
   — Claudia, 28-jul-2026 */
body.content_only .pb-center-column > *:not(h1):not(#short_description_block):not(.mhp-ficha-meta),
.fancybox-inner .pb-center-column > *:not(h1):not(#short_description_block):not(.mhp-ficha-meta) { display: none !important; }
body.content_only .pb-center-column, .fancybox-inner .pb-center-column { min-height: 0 !important; }
.fancybox-inner .pb-center-column #short_description_block { font-size: 13px; }
/* en el popup no pintan nada: lote, tarjeta de marca y recomendadores */
.fancybox-inner .mhp-lote,
.fancybox-inner [data-mhp-marca-ficha],
.fancybox-inner .mhp-carrusel,
.fancybox-inner #mhp-detalles,
body.content_only .mhp-lote,
body.content_only .mhp-marca-ficha,
body.content_only .mhp-carrusel { display: none !important; }

/* ============================================================
   REPASO DE CELIA (28-jul-2026) — CATEGORÍAS Y LISTADOS
   "Haya banner o no haya banner, stock, precio y nombre siempre
    a la misma altura, en la misma línea de productos."
   La rejilla de Bootstrap flotaba los <li> y cada tarjeta medía
   lo que le daba la gana. Se pasa a CSS Grid con filas FIJAS:
   foto · marca · nombre (2 líneas) · PVPR · precio · stock.
   — Claudia, 28-jul-2026
   ============================================================ */
#center_column ul.product_list.grid {
  display: grid;
  /* 4 columnas (antes 3): Celia pide el mismo ancho de tarjeta en home,
     categoría y marca, y así entran los 24 productos de página con la mitad
     de scroll. — Claudia, 4-ago-2026 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
#center_column ul.product_list.grid > li {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  min-height: 0;
}
/* las líneas divisorias del tema entre columnas ya no pintan nada */
#center_column ul.product_list.grid > li:before,
#center_column ul.product_list.grid > li:after,
#center_column ul.product_list.grid:before,
#center_column ul.product_list.grid:after { display: none !important; }

#center_column .product_list.grid .product-container {
  display: grid;
  /* foto · banda de banner (reservada SIEMPRE, haya o no) · nombre a dos
     líneas · precios (con el stock ya dentro de la caja verde) · botonera.
     La fila de stock suelta desaparece: Celia la quiere junto al precio, y con
     una fila menos la tarjeta cabe a 4 columnas. — Claudia, 4-ago-2026 */
  grid-template-rows: 190px 26px 34px auto 1fr;
  gap: 6px;
  height: 100%;
  margin: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#center_column .product_list.grid .product-container:hover {
  border-color: var(--mhp-verde);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .09);
  transform: translateY(-2px);
}
/* los dos envoltorios del tema desaparecen como cajas: sus hijos entran
   directamente en la rejilla de la tarjeta y así TODAS las filas cuadran */
#center_column .product_list.grid .left-block,
#center_column .product_list.grid .right-block { display: contents; }
#center_column .product_list.grid .product-image-container {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  position: relative;
}
#center_column .product_list.grid .product-image-container img {
  max-height: 186px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* el precio duplicado que el tema esconde dentro de la foto */
#center_column .product_list.grid .product-image-container .content_price { display: none !important; }
#center_column .product_list.grid .quick-view,
#center_column .product_list.grid .quick-view-wrapper-mobile { position: absolute; }

/* Banner promocional de marca (lo cuelga un hook dentro de .left-block):
   su propia banda, centrada y escalada, para que no empuje al resto. */
#center_column .product_list.grid .left-block > p {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
}
#center_column .product_list.grid .left-block > p img { max-height: 24px; width: auto; max-width: 100%; }

/* OJO (4-ago-2026): el recorte a dos líneas estaba puesto en el <h5>, y el <h5>
   es un ITEM de la rejilla de la tarjeta (porque .right-block va con
   display:contents). Los items de un grid se "blockifican", así que el
   display:-webkit-box se pierde y -webkit-line-clamp deja de recortar. Con 3
   columnas no se notaba —los nombres cabían en dos líneas—; al pasar a 4 la
   tarjeta se estrecha, salen tres líneas y el nombre se comía el PVPR. El
   recorte se mueve al <a> de dentro, que no es item de la rejilla, y se anula
   el min-height:53px del tema. — Claudia, 4-ago-2026 */
#center_column .product_list.grid h5 {
  grid-row: 3;
  display: block;
  height: 34px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none;
}
#center_column .product_list.grid h5 .product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 34px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mhp-texto);
  text-transform: uppercase;
}
#center_column .product_list.grid .product-desc { display: none !important; }
#center_column .product_list.grid .right-block > .content_price {
  grid-row: 4;
  margin: 0;
  padding: 0;
  border: none;
  text-align: left;
}
#center_column .product_list.grid .right-block > .content_price .price.product-price {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}
#center_column .product_list.grid .divPrecioOcultoBDG {
  position: static;
  top: 0;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--mhp-verde);
  border-radius: 10px;
  background: var(--mhp-verde-claro);
  text-align: left;
}
#center_column .product_list.grid .divPrecioOcultoBDG > div:first-child {
  padding: 0 0 2px !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--mhp-verde-oscuro);
}
/* .mhp-precio-compra es el mismo importe en las tarjetas que pinta mhp-tarjeta.tpl
   (home y marca): allí no se repite el id #ecotax_price_display 24 veces.
   — Claudia, 4-ago-2026 */
#center_column .product_list.grid .divPrecioOcultoBDG #ecotax_price_display,
#center_column .product_list.grid .divPrecioOcultoBDG .mhp-precio-compra {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #24421a;
}
#center_column .product_list.grid .old-price { font-size: 12px; color: #9aa694; }
#center_column .product_list.grid .price-percent-reduction {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #c81e0f;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}
/* el stock ya no es una fila de la rejilla: vive dentro de la caja verde
   (.mhp-pc-fila), a la derecha del precio. — Claudia, 4-ago-2026 */
#center_column .product_list.grid .availability {
  align-self: center;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
#center_column .product_list.grid .availability span {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
#center_column .product_list.grid .availability .label-success { background: var(--mhp-verde-claro); color: var(--mhp-verde-oscuro); }
#center_column .product_list.grid .availability .label-warning { background: #fff8e1; color: #8a6100; }
#center_column .product_list.grid .availability .label-danger { background: #fdecea; color: #b3271a; }
#center_column .product_list.grid .button-container { grid-row: 5; align-self: end; margin: 0; }
#center_column .product_list.grid .color-list-container,
#center_column .product_list.grid .product-flags,
#center_column .product_list.grid .functional-buttons,
#center_column .product_list.grid .hook-reviews { display: none !important; }

@media (max-width: 991px) { #center_column ul.product_list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* En el móvil, dos por fila: a una columna el listado se hacía kilométrico
   (24 productos = 40.000 px de scroll). — Claudia, 28-jul-2026 */
@media (max-width: 640px) {
  #center_column ul.product_list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #center_column .product_list.grid .product-container { grid-template-rows: 130px 22px 32px auto 1fr; padding: 9px; }
  #center_column .product_list.grid .product-image-container { height: 130px; }
  #center_column .product_list.grid .product-image-container img { max-height: 126px; }
  #center_column .product_list.grid h5 .product-name { font-size: 11.5px; }
  #center_column .product_list.grid .divPrecioOcultoBDG #ecotax_price_display { font-size: 15px !important; }
  #center_column .product_list .button-container .lnk_view { display: none; }
  /* en móvil el tema volvía a pintar el botón en cian y la botonera de
     cantidad se desparramaba en tres líneas */
  #center_column .product_list .button-container .ajax_add_to_cart_button,
  #center_column .product_list .button-container a.button.ajax_add_to_cart_button.btn.btn-default {
    flex: 1 1 100%;
    order: 3;
    background: var(--mhp-verde-oscuro) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    font-size: 13px;
    padding: 9px 6px !important;
  }
  #center_column .product_list .button-container > span { display: none !important; }
  #center_column .product_list .button-container input.text {
    order: 1;
    width: 48px !important;
    font-size: 14px !important;
    height: 30px;
  }
  #center_column .product_list .button-container .button-minus,
  #center_column .product_list .button-container .button-plus {
    order: 2;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    line-height: 28px;
    text-align: center;
    margin: 0 !important;
  }
}

/* --- Cabecera de categoría: título, contador y subcategorías --- */
#category #center_column > h1.page-heading,
#manufacturer #center_column > h1.page-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin: 0 0 12px;
  border-bottom: 3px solid var(--mhp-verde);
  font-size: 22px;
  font-weight: 600;
  color: var(--mhp-texto);
  text-transform: none;
}
#category #center_column > h1.page-heading .heading-counter {
  font-size: 13px;
  font-weight: 400;
  color: #7b8579;
  float: none;
}
.mhp-subcats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
}
.mhp-subcats-titulo { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #7b8579; }
.mhp-subcat {
  padding: 5px 13px;
  border: 1px solid #dde8d2;
  border-radius: 999px;
  background: var(--mhp-verde-claro);
  color: var(--mhp-verde-oscuro) !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.mhp-subcat:hover { background: var(--mhp-verde-oscuro); border-color: var(--mhp-verde-oscuro); color: #fff !important; text-decoration: none; }
.mhp-subcat span { font-weight: 400; opacity: .75; }

/* --- Página de marca: filtros y "lo que sueles pedir" (Celia 28-jul) --- */
.mhp-filtros-marca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--mhp-gris-fondo);
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
}
.mhp-filtros-marca-titulo { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #7b8579; margin-right: 4px; }
.mhp-habituales { margin: 0 0 22px; }
.mhp-habituales .mhp-titulo-seccion { margin-top: 0; }

/* --- Botonera de la tarjeta del listado ---------------------------------
   Debajo de 992px el tema vuelve a pintar "Añadir al carrito" en el cian
   viejo y "Más" en amarillo; se unifican con el verde de marca. */
#center_column .product_list .button-container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#center_column .product_list .button-container .ajax_add_to_cart_button,
#center_column .product_list .button-container .ajax_add_to_cart_button.btn.btn-default {
  flex: 1 1 auto;
  background: var(--mhp-verde-oscuro) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--mhp-radio) !important;
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 700;
  text-align: center;
}
#center_column .product_list .button-container .ajax_add_to_cart_button:hover { background: #3a5a2e !important; }
/* el <span> de dentro traía su propio fondo cian del tema viejo: el botón se
   veía azul aunque el enlace fuera verde */
#center_column .product_list .button-container .ajax_add_to_cart_button span,
#center_column .product_list .button-container .lnk_view span,
#center_column .product_list .button-container .button-minus span,
#center_column .product_list .button-container .button-plus span {
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
}
#center_column .product_list .button-container .ajax_add_to_cart_button span { color: #fff !important; }
#center_column .product_list .button-container .lnk_view,
#center_column .product_list .button-container .lnk_view.btn.btn-default {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--mhp-gris-borde) !important;
  border-radius: var(--mhp-radio) !important;
  color: var(--mhp-texto) !important;
  text-shadow: none !important;
}
#center_column .product_list .button-container .lnk_view:hover { border-color: var(--mhp-verde) !important; color: var(--mhp-verde-oscuro) !important; }
#center_column .product_list .button-container input.text {
  height: 34px;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 6px;
  text-align: center;
}
/* el triángulo gris con el ojo encima de la foto: fuera. La vista rápida
   se queda en el botón que sale al pasar por encima. */
#center_column .product_list .quick-view-wrapper-mobile { display: none !important; }

/* ============ Página de OFERTAS (/ofertas, módulo mhpdtolinea) ============
   Tres bloques: promociones en curso (tarjetas), corta caducidad y outlet
   (grids de product-list.tpl, idénticos a los de categoría). — Claudia, 30-jul-2026 */
.mhp-ofertas .page-heading { margin-bottom: 14px; }
.mhp-ofertas-volver { margin: 0 0 16px; }
.mhp-ofertas-volver a { color: var(--mhp-marino); font-weight: 600; }
.mhp-ofertas-bloque { margin-bottom: 34px; }
.mhp-ofertas-titulo {
  font-size: 19px; font-weight: 700; color: var(--mhp-texto);
  margin: 0 0 4px; padding-top: 6px;
}
.mhp-ofertas-cab { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.mhp-ofertas-cab .mhp-ofertas-titulo { margin: 0; }
.mhp-ofertas-sub { color: #5a6357; font-size: 13px; margin: 0; flex: 1 1 auto; }
.mhp-ofertas-vertodo {
  display: inline-block; padding: 6px 14px; border-radius: var(--mhp-radio);
  background: var(--mhp-verde-oscuro); color: #fff !important; font-weight: 600; font-size: 13px;
}
.mhp-ofertas-vertodo:hover { background: var(--mhp-verde); text-decoration: none; }

/* Tarjetas de promoción */
.mhp-promo-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; margin: 10px 0 18px;
}
.mhp-promo-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--mhp-gris-borde); border-radius: var(--mhp-radio);
  background: #fff; padding: 12px 14px;
}
.mhp-promo-img { display: block; max-width: 280px !important; width: auto; height: auto; }
.mhp-promo-chapa {
  display: inline-block; background: var(--mhp-verde-claro); color: var(--mhp-verde-oscuro);
  border-radius: 4px; padding: 1px 8px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; margin-right: 6px;
}
.mhp-promo-detalle { color: #5a6357; font-size: 13px; }
.mhp-promo-detalle b { color: #2f3a2c; font-size: 14px; }
.mhp-promo-hasta { display: block; color: #a06a00; font-size: 12px; margin-top: 2px; }
.mhp-promo-ir { margin-top: auto; color: var(--mhp-marino); font-weight: 600; font-size: 13px; }
.mhp-promo-ir:hover { color: var(--mhp-verde-oscuro); }
@media (max-width: 767px) {
  .mhp-promo-cards { grid-template-columns: 1fr 1fr; }
  .mhp-promo-card { padding: 10px; }
  .mhp-promo-img { max-width: 100% !important; }
}
.mhp-promo-quien { display: block; color: var(--mhp-marino); font-size: 12.5px; font-weight: 600; margin-top: 2px; }

/* ============ Escalera de volumen (Fernando, 10-ago-2026) ============
   Una promoción por volumen es UNA tarjeta con sus escalones dentro, no una
   tarjeta por escalón. Los peldaños van en fila y suben de intensidad hacia la
   derecha, para que se lea "cuantas más, mejor". — Claudia, 10-ago-2026 */
.mhp-promo-escalera {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.mhp-peldano {
  display: flex; flex-direction: column; align-items: center; min-width: 62px;
  border: 1px solid var(--mhp-gris-borde); border-radius: 6px;
  padding: 4px 8px; background: #fafbfa; line-height: 1.15;
}
.mhp-peldano-uds { color: #5a6357; font-size: 11.5px; font-weight: 600; }
.mhp-peldano-pct { color: #c81e0f; font-size: 14px; font-weight: 800; white-space: nowrap; }
/* El escalón que el cliente YA tiene: verde, sin ambigüedad. */
.mhp-peldano-activo {
  border-color: var(--mhp-verde-oscuro); background: var(--mhp-verde-claro);
}
.mhp-peldano-activo .mhp-peldano-uds { color: var(--mhp-verde-oscuro); }
/* El siguiente al que puede llegar: punteado, como un hueco por rellenar. */
.mhp-peldano-siguiente { border-style: dashed; border-color: var(--mhp-marino); }
@media (max-width: 767px) {
  .mhp-peldano { min-width: 56px; padding: 3px 6px; }
  .mhp-peldano-pct { font-size: 13px; }
}

/* ============ Ficha: repaso de Fernando 30-jul-2026 ============
   1) ventajas (caducidad/volumen/promos) a la DERECHA del precio, dentro de
      la caja de compra · 2) sin lista de deseos (el tpl ya no la pinta) ·
   3) descuentos por volumen en TARJETAS (2-3 por fila, como Rosana) ·
   4) entrega en una línea discreta · 5) precio en tarjeta cuadrada con el
      "ocultar" como enlace pequeño, no como botón-píldora. */

/* 1) caja de compra a 4 columnas: precio · ventajas · stock/cantidad · botón */
@media (min-width: 992px) {
  #product .pb-right-column .box-info-product {
    grid-template-columns: minmax(195px, .95fr) minmax(185px, .95fr) minmax(145px, .7fr) minmax(205px, 1fr);
    gap: 14px 18px;
  }
  #product .pb-right-column .content_prices { grid-column: 1; grid-row: 1; }
  #product .pb-right-column .mhp-ventajas-caja { grid-column: 2; grid-row: 1; }
  #product .pb-right-column .product_attributes { grid-column: 3; grid-row: 1; }
  #product .pb-right-column .box-cart-bottom { grid-column: 4; grid-row: 1; }
  #product .pb-right-column .mhp-descuentos-cantidad { grid-column: 1 / -1; grid-row: 2; }
}
.mhp-ventajas-caja {
  border: 1px solid var(--mhp-gris-borde);
  border-radius: var(--mhp-radio);
  background: #fff;
  align-self: start;
  margin: 0;
}
.mhp-ventajas-caja .mhp-ventaja-img img { max-width: 100% !important; height: auto; }

/* 5) tarjeta de precio: un solo cuadrado con el precio, el PVPR y el enlace
      de ocultar — fuera la píldora grande y los bordes redondos sueltos */
#product .content_prices {
  border: 1px solid var(--mhp-verde);
  border-radius: var(--mhp-radio);
  background: #fff;
  padding: 12px 14px 8px;
  align-self: start;
}
#product .content_prices .divPrecioOcultoBDG {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
#product .content_prices .our_price_display {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px dashed var(--mhp-gris-borde);
}
#product .content_prices .our_price_display #our_price_display {
  font-size: 13px;
  font-weight: 600;
  color: #6c7a64;
  background: none;
  padding: 0;
}
#product .content_prices .BDGVerMiPrecio {
  background: none !important;
  border: none !important;
  padding: 2px 0 0 !important;
  margin: 2px 0 0 !important;
  text-align: right;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mhp-marino);
  text-decoration: underline;
  cursor: pointer;
  border-radius: 0 !important;
}
#product .content_prices .BDGVerMiPrecio:hover { color: var(--mhp-verde-oscuro); background: none !important; }

/* 3) descuentos por volumen en tarjetas cuadradas, 2-3 por fila */
.mhp-descuentos-cantidad tbody {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.mhp-descuentos-cantidad tbody tr,
.mhp-descuentos-cantidad tbody tr:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px 10px;
  border: 1px solid var(--mhp-gris-borde);
  border-top: 1px solid var(--mhp-gris-borde);
  border-radius: var(--mhp-radio);
  text-align: center;
}
.mhp-descuentos-cantidad tbody tr:hover { box-shadow: inset 0 0 0 2px var(--mhp-verde); background: #fff; }
.mhp-descuentos-cantidad tbody td:first-child { font-size: 16px; }
.mhp-descuentos-cantidad tbody td:nth-child(2) { font-size: 15px; }
.mhp-descuentos-cantidad tbody tr::after { opacity: 1; color: #9aa79a; }
.mhp-descuentos-cantidad tbody tr:hover::after { color: var(--mhp-verde-oscuro); }

/* 4) entrega discreta: una línea pequeña y gris, sin icono */
.mhp-entrega-discreta {
  display: block !important;
  font-size: 11.5px;
  color: #8a948a;
  line-height: 1.5;
  margin: 8px 0 0 !important;
}
.mhp-entrega-discreta .mhp-entrega-cond { color: #6c7a64; }

/* ============ Ficha, 2ª ronda de Fernando (30-jul-2026, tarde) ============
   Ofertas en horizontal DEBAJO del precio · stock+entrega en una línea a lo
   ancho · cantidad centrada con el botón · logos de pago discretos abajo ·
   descuentos por volumen = solo cuadraditos, sin banda verde ni frase. */

/* Caja de compra: precio | cantidad+botón arriba; debajo, filas a lo ancho */
@media (min-width: 992px) {
  #product .pb-right-column .box-info-product {
    grid-template-columns: minmax(230px, 340px) minmax(0, 1fr);
    gap: 12px 22px;
  }
  #product .pb-right-column .content_prices { grid-column: 1; grid-row: 1; }
  #product .pb-right-column .box-cart-bottom { grid-column: 2; grid-row: 1; }
  #product .pb-right-column .mhp-ventajas-caja { grid-column: 1 / -1; grid-row: 2; }
  #product .pb-right-column .mhp-stock-linea { grid-column: 1 / -1; grid-row: 3; }
  #product .pb-right-column .mhp-descuentos-cantidad { grid-column: 1 / -1; grid-row: 4; }
  #product .pb-right-column .product_attributes { grid-column: 1 / -1; grid-row: 5; }
}

/* Ofertas: una tarjetita POR FILA, a ancho completo y alineadas a la
   izquierda (Celia, 5-ago-2026 — en fila con wrap cada una encogía y la
   última quedaba como centrada). */
.mhp-ventajas-caja {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none;
  background: none;
  padding: 0;
}
.mhp-ventajas-caja .mhp-ventaja,
.mhp-ventajas-caja .mhp-ventaja + .mhp-ventaja {
  flex: 0 0 auto;
  width: 100%;
  justify-content: flex-start;
  border: 1px solid var(--mhp-gris-borde);
  border-top: 1px solid var(--mhp-gris-borde);
  border-radius: var(--mhp-radio);
  background: #fff;
  padding: 7px 10px;
}
.mhp-ventajas-caja .mhp-ventaja-img { padding: 4px 6px; }
.mhp-ventajas-caja .mhp-ventaja-img img { max-width: 240px !important; height: auto; }

/* Stock + entrega: una línea a lo ancho */
.mhp-stock-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  font-size: 12px;
  color: #8a948a;
  line-height: 1.5;
  padding: 2px 2px 0;
}
.mhp-stock-linea .mhp-stock-n { color: var(--mhp-verde-oscuro); font-weight: 600; font-size: 12.5px; }
.mhp-stock-linea .mhp-stock-n b { font-size: 13.5px; }
.mhp-stock-linea .mhp-stock-fuera { color: #a15c00; }
.mhp-stock-linea .mhp-entrega-cond { color: #6c7a64; }

/* Cantidad centrada con el botón */
#product .box-cart-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: center;
}
#product .box-cart-bottom #quantity_wanted_p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  float: none;
}
#product .box-cart-bottom #quantity_wanted_p label { margin: 0 4px 0 0; }
#product .box-cart-bottom #add_to_cart { margin: 0; }

/* Logos de pago (ps_checkout) discretos, al final y en pequeño */
#product .pb-right-column .payment-method-logos-container,
#product .pb-right-column [class*="payment-method-logos"] {
  order: 9;
  margin: 10px 0 0;
  opacity: .5;
  filter: grayscale(1);
  transform: scale(.8);
  transform-origin: center top;
}
#product .pb-right-column [class*="ps_checkout-express-button"] {
  order: 8;
  margin: 8px 0 0;
  transform: scale(.85);
  transform-origin: center top;
  max-width: 220px;
}
#product .pb-right-column .ps_checkout-express-separator { display: none; }

/* Descuentos por volumen: SOLO los cuadraditos (sin banda verde, sin título
   grande ni frase-gancho), como en Rosana */
.mhp-descuentos-cantidad {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.mhp-descuentos-cantidad .page-product-heading { display: none; }
.mhp-descuentos-cantidad .mhp-dto-gancho { display: none !important; }
.mhp-descuentos-cantidad .page-product-box { margin: 0; }
.mhp-descuentos-cantidad table.table-product-discounts { border: none; border-radius: 0; overflow: visible; }
.mhp-descuentos-cantidad tbody {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}
.mhp-descuentos-cantidad tbody tr,
.mhp-descuentos-cantidad tbody tr:first-child {
  flex: 0 0 auto;
  min-width: 110px;
  padding: 8px 12px;
  gap: 1px;
}
.mhp-descuentos-cantidad tbody td:first-child { font-size: 14px; }
.mhp-descuentos-cantidad tbody td:nth-child(2) { font-size: 14px; }
.mhp-descuentos-cantidad tbody tr::after { font-size: 10px; }
/* (2ª ronda, remate) Los logos de pago de ps_checkout van por ID, no por clase */
#ps_checkout-payment-method-logo-block-container,
#ps_checkout-payment-method-logos-container {
  order: 9;
  margin: 8px 0 0;
  opacity: .45;
  filter: grayscale(1);
  transform: scale(.72);
  transform-origin: center top;
}
#ps_checkout-payment-method-logo-block-container:hover,
#ps_checkout-payment-method-logos-container:hover { opacity: .9; filter: none; }
/* y el cuadradito de volumen sin la caja ancha de la tabla de detrás */
.mhp-descuentos-cantidad #quantityDiscount { border: none; background: none; padding: 0; width: auto; }
.mhp-descuentos-cantidad table.table-product-discounts { width: auto; }
/* (2ª ronda, remate 2) la sección y la tabla de detrás del cuadradito de
   volumen, totalmente transparentes — solo se ve la tarjetita */
.mhp-descuentos-cantidad .page-product-box { border: none !important; border-radius: 0 !important; background: none !important; }
.mhp-descuentos-cantidad table.table-product-discounts { background: none !important; }

/* ============ Ficha, 3ª ronda de Fernando (30-jul-2026, noche) ============
   Fuera los logos de pago · botón secundario "Añadir N uds" bajo el principal ·
   la banda de ofertas VISIBLE y vistosa (estilo Rosana, colores MH). */

/* Fuera PayPal y compañía de la ficha */
#product #ps_checkout-payment-method-logo-block-container,
#product #ps_checkout-payment-method-logos-container,
#product .pb-right-column [class*="ps_checkout-express-button"],
#product .pb-right-column .ps_checkout-express-separator { display: none !important; }

/* Botón secundario "Añadir 3 uds · 6,41 €/ud" */
.mhp-btn-anadir-n {
  display: block;
  margin: 8px auto 0;
  padding: 8px 18px;
  background: #fff;
  border: 2px solid var(--mhp-verde-oscuro);
  border-radius: var(--mhp-radio);
  color: var(--mhp-verde-oscuro);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mhp-btn-anadir-n:hover { background: var(--mhp-verde-oscuro); color: #fff; }

/* Banda de ofertas: que SE VEA — degradado verde suave, chapa sólida,
   texto grande. Estilo de la banda de Rosana, con los colores de MH. */
.mhp-ventajas-caja {
  background: linear-gradient(100deg, var(--mhp-verde-claro), #f7fbf3 70%, #fff);
  border: 1px solid var(--mhp-verde);
  border-radius: 10px;
  padding: 10px 12px;
  gap: 10px;
  /* Celia 5-ago-2026: filas a ancho completo y alineadas a la izquierda —
     con center cada fila encogía y la 3ª parecía centrada */
  align-items: stretch;
}
.mhp-ventajas-caja .mhp-ventaja,
.mhp-ventajas-caja .mhp-ventaja + .mhp-ventaja {
  border: 1px solid #dfe9d5;
  background: #fff;
  box-shadow: 0 1px 3px rgba(74, 112, 59, .12);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mhp-ventajas-caja .mhp-ventaja-chapa {
  background: var(--mhp-verde-oscuro);
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  /* Celia 5-ago-2026: chapas al mismo ancho para que todos los textos
     arranquen alineados */
  min-width: 128px;
  text-align: center;
  flex: 0 0 auto;
}
.mhp-ventajas-caja .mhp-ventaja-caducidad .mhp-ventaja-chapa { background: #b07a00; }
.mhp-ventajas-caja .mhp-ventaja-txt { color: #4a5348; font-size: 13px; }
/* mismo cuerpo que el resto del texto (antes 16px y bailaba la línea) */
.mhp-ventajas-caja .mhp-ventaja-txt b { color: var(--mhp-verde-oscuro); font-size: 13px; margin-right: 4px; }
/* el % de la oferta, en rojo como el precio específico (Celia, 5-ago-2026) */
.mhp-pct-rojo { color: #c81e0f; font-weight: 800; white-space: nowrap; }

/* --- Ficha para el CLIENTE FINAL (Fernando, 5-ago-2026) --- */
#mhp-ficha-cliente {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mhp-fc-abierta, .mhp-fc-abierta body { overflow: hidden; }
.mhp-fc-lienzo { max-width: 980px; margin: 0 auto; padding: 40px 28px 60px; }
.mhp-fc-cerrar {
  position: fixed; top: 18px; right: 22px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #d6ddd2; background: #fff; color: #4a5348;
  font-size: 26px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.mhp-fc-cerrar:hover { background: #f2f6ef; }
.mhp-fc-cab { display: flex; gap: 36px; align-items: center; margin-bottom: 26px; }
.mhp-fc-foto { flex: 0 0 44%; text-align: center; }
.mhp-fc-foto img { max-width: 100%; height: auto; }
.mhp-fc-info { flex: 1 1 auto; min-width: 0; }
.mhp-fc-marca { font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--mhp-verde-oscuro, #2f6b2f); margin-bottom: 6px; }
.mhp-fc-nombre { font-size: 27px; font-weight: 800; line-height: 1.25; color: #2f3a2c; margin-bottom: 14px; }
.mhp-fc-pvp { font-size: 21px; color: #2f3a2c; }
.mhp-fc-pvp b { font-size: 26px; color: var(--mhp-verde-oscuro, #2f6b2f); }
.mhp-fc-detalles { border-top: 1px solid #e3e8e0; padding-top: 18px; font-size: 15px; line-height: 1.6; }
.mhp-fc-detalles .page-product-heading { font-size: 16px; margin: 18px 0 8px; }
@media (max-width: 767px) {
  .mhp-fc-cab { flex-direction: column; gap: 14px; }
  .mhp-fc-foto { flex-basis: auto; }
}

/* El aviso viejo de disponibilidad de serie ("En este momento sin Stock",
   bloque feo bajo el precio) FUERA: la caja nueva de sin stock y la línea de
   stock ya lo dicen bien (Fernando, 5-ago-2026). */
#product #availability_statut { display: none !important; }
/* Sin stock: la caja Avísame solo cuando NO se puede comprar (el botón de
   añadir lo gobierna PrestaShop — corrección de Fernando, 5-ago 2ª pasada) */
#buy_block .mhp-sinstock { margin: 0 0 10px; }

/* ============================================================
   AJUSTES FINOS DE CELIA (5-ago-2026, tarde) — 2ª ronda
   ============================================================ */
/* Menú: todo a la izquierda y OFERTAS + campanita empujadas a la derecha */
.sf-menu > li:nth-last-child(2) { margin-left: auto; }
/* Campanita destacada en amarillo */
#block_top_menu a[href*="mailalerts/account"] { background: #f6c50f !important; }
#block_top_menu a[href*="mailalerts/account"]:hover { background: #e5b400 !important; }
/* Desplegable del carrito: botón Confirmar con el verde de la web y redondeado */
#header .cart_block .cart-buttons a,
#header #button_order_cart {
  background: var(--mhp-verde-oscuro, #2f6b2f) !important;
  background-image: none !important;
  border: none !important; border-radius: 8px !important;
  box-shadow: none !important; text-shadow: none !important; color: #fff !important;
}
#header .cart_block .cart-buttons a:hover,
#header #button_order_cart:hover { background: #24521f !important; }
/* − y + centrados de verdad, número centrado y sin flechitas del input */
#product .box-info-product .button-minus,
#product .box-info-product .button-plus,
.product_list .button-minus, .product_list .button-plus {
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
#product .box-info-product .button-minus span,
#product .box-info-product .button-plus span,
.product_list .button-minus span, .product_list .button-plus span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 0; line-height: 1;
}
#quantity_wanted, .product_list input.text[name^="qty_"] {
  text-align: center; padding-left: 2px; padding-right: 2px;
  -moz-appearance: textfield;
}
#quantity_wanted::-webkit-outer-spin-button, #quantity_wanted::-webkit-inner-spin-button,
.product_list input.text::-webkit-outer-spin-button, .product_list input.text::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
/* Ficha: botones − y + sin fondo blanco */
#product .box-info-product .button-minus,
#product .box-info-product .button-plus {
  background: transparent !important; background-image: none !important;
}
/* "Ver composición…" centrado justo bajo el Llévatelo junto (lo mueve mhp.js) */
.mhp-ir-detalles-caja { display: block; text-align: center; margin: 12px 0 4px; }
/* Tarjetas de los carruseles de la ficha: botón de añadir al pie */
.mhp-card { display: flex; flex-direction: column; }
.mhp-card-lnk { display: block; color: inherit; text-decoration: none; flex: 1 1 auto; }
.mhp-card-lnk:hover { color: inherit; text-decoration: none; }
.mhp-card-add {
  margin-top: 8px; width: 100%; border: none; border-radius: 6px;
  background: var(--mhp-verde-oscuro, #2f6b2f); color: #fff;
  font-weight: 700; font-size: 12.5px; padding: 8px 6px; cursor: pointer;
}
.mhp-card-add:hover { background: #24521f; }
/* Listados: botón Avísame en productos sin stock */
.mhp-avisame-lista span { white-space: nowrap; }
.mhp-avisame-lista.mhp-avisado,
.mhp-avisame-lista.mhp-avisado:hover { background: #eef6ea !important; color: var(--mhp-verde-oscuro, #2f6b2f) !important; border-color: var(--mhp-verde, #63a05e) !important; cursor: default; }

/* --- Historial de pedidos: pestañas de periodo y paginación (5-ago-2026) --- */
.mhp-hist-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.mhp-hist-paginas { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; }
.mhp-hist-pagina-n { color: #6c7a64; font-size: 13px; }

/* --- Detalle de pedido del front (Mis pedidos → ver): más legible, con
   fotos y sin la columna de la derecha (Fernando, 5-ago-2026) --- */
#order-detail #right_column { display: none !important; }
#order-detail #center_column { width: 100% !important; }
#order-detail .mhp-od-prod { display: flex; align-items: center; gap: 12px; }
#order-detail .mhp-od-foto {
  flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain;
  border: 1px solid #e3e8e0; border-radius: 6px; background: #fff;
}
#order-detail .mhp-od-nombre { font-weight: 600; color: var(--mhp-texto, #2f3a2c); }
#order-detail .mhp-od-nombre:hover { color: var(--mhp-verde-oscuro, #2f6b2f); }
#order-detail .table.table-bordered { border: 1px solid #e3e8e0; border-radius: 8px; }
#order-detail .table.table-bordered td, #order-detail .table.table-bordered th {
  vertical-align: middle; border-color: #eef1ec; padding: 9px 12px;
}
#order-detail .table.table-bordered thead th {
  background: #f2f6ef; color: var(--mhp-verde-oscuro, #2f6b2f);
  text-transform: uppercase; font-size: 11.5px; letter-spacing: .4px;
}
#order-detail tr.totalprice .price { font-size: 18px; color: var(--mhp-verde-oscuro, #2f6b2f); }
#order-detail .detail_step_by_step { font-size: 12.5px; }

/* Logo de marca en las tarjetas de /ofertas cuando no hay banner propio */
.mhp-promo-logo {
  display: block; max-width: 150px; max-height: 60px; width: auto; height: auto;
  margin: 0 0 8px; object-fit: contain;
}

/* --- Caja de SIN STOCK de la ficha (Fernando, 5-ago-2026) --- */
.mhp-sinstock {
  border: 1px solid #e8c9a0; background: #fff9f0; border-radius: 10px;
  padding: 14px 16px; margin: 10px 0 12px;
}
.mhp-sinstock-cab { margin-bottom: 10px; }
.mhp-sinstock-cab b { font-size: 14.5px; color: #8a5a00; }
#mhp-sinstock-fecha { display: block; font-size: 12.5px; color: #6c7a64; margin-top: 2px; }
.mhp-sinstock-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mhp-sinstock-uds { display: inline-flex; align-items: center; gap: 4px; }
.mhp-sinstock-uds .text {
  width: 52px; height: 38px; text-align: center; margin: 0;
  border: 1px solid #d6ddd2; border-radius: 6px; font-weight: 700;
}
.mhp-sinstock-mas-menos {
  display: inline-block; width: 32px; height: 38px; line-height: 36px;
  text-align: center; border: 1px solid #d6ddd2; border-radius: 6px;
  background: #fff; color: #4a5348; font-size: 17px; text-decoration: none;
}
.mhp-sinstock-mas-menos:hover { background: #f2f6ef; text-decoration: none; }
.mhp-sinstock-btn {
  display: inline-block; padding: 10px 18px; border-radius: 8px;
  background: var(--mhp-verde-oscuro, #2f6b2f); color: #fff !important;
  font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.mhp-sinstock-btn:hover { background: #24521f; text-decoration: none; }
.mhp-sinstock-nota { margin: 10px 0 0; font-size: 12px; color: #6c7a64; }
#oos_customer_email_result {
  display: block; margin-top: 10px; padding: 8px 12px; border-radius: 8px;
  background: #eef6ea; border: 1px solid var(--mhp-verde, #63a05e);
  color: var(--mhp-verde-oscuro, #2f6b2f); font-weight: 600; font-size: 13px;
}

/* ============================================================
   REPASO DE CELIA (4-ago-2026) — 9 puntos en 4 bloques
   A) menú desplegable · B) tarjeta de producto unificada ·
   C) página de categoría · D) home y footer.
   Detalle punto por punto: docs/cro-mhp-celia/repaso-celia-04ago.md
   — Claudia, 4-ago-2026
   ============================================================ */

/* ---------- A) Menú desplegable: TODAS las categorías iguales ----------
   Puntos 1 y 2. Uniformidad total: mayúsculas y flecha tengan o no hijas, y
   las hijas un pelín a la derecha para que se lea de dónde cuelgan. */
@media (min-width: 768px) {
  #block_top_menu .sf-menu > li > ul > li > a {
    position: relative;
    padding-left: 15px !important;
  }
  /* la "flechita" que pide Celia: un chevron verde delante del titular. Va en
     pseudo-elemento con fuente propia porque la FontAwesome del tema convierte
     los caracteres sueltos en cuadraditos (ya pasó con los +/− del árbol). */
  #block_top_menu .sf-menu > li > ul > li > a::before {
    content: "\203A";
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    left: 2px;
    top: 0;
    font-size: 15px;
    line-height: 1.15;
    color: var(--mhp-verde);
  }
  /* subcategorías (3er nivel) indentadas bajo su titular */
  #block_top_menu .sf-menu > li > ul ul { padding-left: 15px !important; }
  #block_top_menu .sf-menu > li > ul ul a { padding-left: 0 !important; }
}

/* ---------- B) Tarjeta de producto: la misma en home, categoría y marca ----
   Puntos 3, 4 y 5. */

/* 3 — FUERA EL HOVER. La botonera la escondía global.js (blockHover) con un
   display:none EN LÍNEA, no una hoja de estilos: por eso no bastaba con subir
   la especificidad. El !important gana a lo inline, y mhp.js además anula la
   función para que tampoco toque alturas ni añada .hovered. */
#center_column .product_list.grid .button-container { display: flex !important; }
#center_column ul.product_list.grid > li.hovered {
  height: auto !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
#center_column ul.product_list.grid > li.hovered .right-block > .content_price { display: block !important; }
#center_column ul.product_list.grid > li.hovered .product-image-container .content_price { display: none !important; }

/* 4 — "Ver producto" en vez de "Vista rápida": sin popup, va a la ficha.
   Aparece sobre la foto al pasar por encima; el enlace vive SIEMPRE en el
   HTML (rastreable), solo se atenúa con CSS. */
#center_column .product_list.grid .mhp-ver-producto {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%) scale(.96);
  padding: 8px 16px;
  border: 2px solid var(--mhp-verde-oscuro);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: var(--mhp-verde-oscuro) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
#center_column .product_list.grid .mhp-ver-producto span { background: none !important; }
#center_column .product_list.grid .product-container:hover .mhp-ver-producto {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
#center_column .product_list.grid .mhp-ver-producto:hover {
  background: var(--mhp-verde-oscuro);
  color: #fff !important;
  text-decoration: none;
}

/* 5 — el reparto de la maqueta de Celia ("lo dejaría así"):
   nombre y PVPR centrados · caja verde con el precio y, a su derecha, el
   stock · cantidad centrada · botón a ancho completo. */
#center_column .product_list.grid h5 { text-align: center; }
#center_column .product_list.grid .right-block > .content_price .price.product-price { text-align: center; }
#center_column .product_list.grid .divPrecioOcultoBDG { padding: 8px 10px; }
#center_column .product_list.grid .mhp-pc-titulo {
  padding: 0 0 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--mhp-verde-oscuro);
}
#center_column .product_list.grid .mhp-pc-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#center_column .product_list.grid .mhp-pc-importe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0;
}
/* el precio grande, siempre en su propia línea; encima, tachado y -N% */
#center_column .product_list.grid .mhp-pc-importe #ecotax_price_display,
#center_column .product_list.grid .mhp-pc-importe .mhp-precio-compra { flex: 0 0 100%; }
#center_column .product_list.grid .mhp-pc-importe .old-price { margin: 0; }

/* botonera: [−] [n] [+] centrados y el botón a ancho completo debajo */
#center_column .product_list.grid .button-container {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding-top: 2px;
}
/* el "Stock:92" en crudo y el botón "Más" no están en la maqueta: la ficha ya
   se abre desde la foto, el nombre y "Ver producto" */
#center_column .product_list.grid .button-container .mhp-stock-crudo,
#center_column .product_list.grid .button-container .lnk_view { display: none !important; }
#center_column .product_list.grid .button-container .button-minus { order: 1; }
#center_column .product_list.grid .button-container input.text { order: 2; width: 54px !important; height: 32px; font-size: 14px !important; padding: 0 4px; }
#center_column .product_list.grid .button-container .button-plus { order: 3; }
#center_column .product_list.grid .button-container .button-minus,
#center_column .product_list.grid .button-container .button-plus {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--mhp-gris-borde) !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--mhp-verde-oscuro) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-shadow: none !important;
}
#center_column .product_list.grid .button-container .button-minus:hover,
#center_column .product_list.grid .button-container .button-plus:hover { border-color: var(--mhp-verde) !important; background: var(--mhp-verde-claro) !important; }
#center_column .product_list.grid .button-container .ajax_add_to_cart_button,
#center_column .product_list.grid .button-container .ajax_add_to_cart_button.btn.btn-default {
  order: 4;
  flex: 1 1 100%;
  padding: 9px 8px !important;
  font-size: 13px;
}
/* móvil: a 2 columnas la tarjeta es estrecha, el trío de cantidad se aprieta */
@media (max-width: 640px) {
  #center_column .product_list.grid .button-container input.text { width: 44px !important; height: 28px; }
  #center_column .product_list.grid .button-container .button-minus,
  #center_column .product_list.grid .button-container .button-plus { width: 28px; height: 28px; }
  #center_column .product_list.grid .mhp-pc-fila { flex-wrap: wrap; gap: 2px 6px; }
}
/* tablet: 3 columnas (4 no caben con la tarjeta legible) */
@media (min-width: 992px) and (max-width: 1199px) {
  #center_column ul.product_list.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- C) Página de categoría ----------
   Puntos 6 y 7. La columna izquierda pasa a dos desplegables (MENÚ y FILTROS)
   con su +/−, y el H1 se alinea con la cabecera de MENÚ.
   OJO SEO: se pliega con CSS; los enlaces del árbol de categorías siguen
   impresos en el HTML aunque el bloque esté cerrado. */
#left_column .block.mhp-plegable > .title_block,
#left_column .block.mhp-plegable > h2.title_block,
#left_column .block.mhp-plegable > p.title_block {
  position: relative;
  margin: 0;
  padding-right: 40px;
  cursor: pointer;
  user-select: none;
}
#left_column .block.mhp-plegable > .title_block:hover { color: var(--mhp-verde-oscuro); }
.mhp-plegable-icono {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  font: 700 20px/22px Arial, Helvetica, sans-serif;
  text-align: center;
  color: var(--mhp-verde);
}
#left_column .block.mhp-plegable.mhp-abierto .mhp-plegable-icono { color: var(--mhp-verde-oscuro); }
#left_column .block.mhp-plegable:not(.mhp-abierto) > .block_content { display: none !important; }

/* 7 — el H1 del listado, a la altura del texto de la cabecera MENÚ.
   Las dos cajas ya arrancaban a la misma Y; lo que se veía descuadrado era el
   TEXTO, porque la cabecera del bloque lleva 3px de borde + 14px de padding
   antes de su título y el H1 empieza a ras. Se le da al H1 ese mismo respiro
   (3+14 = 17px). — Claudia, 4-ago-2026 */
#category #left_column,
#manufacturer #left_column { padding-top: 0; }
#category #left_column > .block:first-child,
#manufacturer #left_column > .block:first-child { margin-top: 0; }
#category #left_column .block .title_block,
#manufacturer #left_column .block .title_block { margin-top: 0; }
#category #center_column,
#manufacturer #center_column { padding-top: 0; }
#category #center_column > h1.page-heading { padding-top: 17px; }

/* La página de MARCA no tiene columna izquierda, así que a 4 columnas su
   tarjeta salía 75px más ancha que la de categoría. Celia pedía "4 o 5 para
   que el ancho sea similar al de la home y la categoría": medido, la que
   cumple eso es 5 (221px frente a 206px). — Claudia, 4-ago-2026 */
@media (min-width: 1200px) {
  #manufacturer #center_column ul.product_list.grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- D) Home y footer ---------- */

/* 8 — Boletín: alineado con los otros dos bloques del pie, con su gancho y
   con el campo en blanco sobre marino (antes gris sobre gris). */
.footer-container #footer > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
/* Todo lo del boletín va con selectores "#footer #newsletter_block_left…"
   porque así lo escribió el tema (css/modules/blocknewsletter): con dos IDs no
   hay manera de ganarle desde fuera. Es él quien lo dejaba al 50% flotado, con
   el título flotando a la izquierda, el campo en gris marengo y el botón como
   una flechita de FontAwesome sin texto — los tres problemas que ve Celia.
   — Claudia, 4-ago-2026 */
#footer #newsletter_block_left {
  width: auto;
  float: none;
  overflow: visible;
}
/* el titular, con el mismo idioma que "CONTACTA CON NOSOTROS" e "INFORMACIÓN" */
#footer #newsletter_block_left h4 {
  float: none;
  padding: 0 0 8px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(255, 255, 255, .18);
}
#footer #newsletter_block_left .mhp-nl-cta {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #d9e2ef;
}
#footer #newsletter_block_left .form-group { display: flex; max-width: 420px; }
#footer #newsletter_block_left .form-group .form-control,
#footer #newsletter_block_left .newsletter-input {
  flex: 1 1 auto;
  float: none;
  height: 42px;
  max-width: none !important;
  padding: 10px 12px;
  border: 1px solid #fff;
  border-right: none;
  border-radius: var(--mhp-radio) 0 0 var(--mhp-radio);
  background: #fff;
  color: var(--mhp-marino);
  font-size: 13.5px;
  box-shadow: none;
}
#footer #newsletter_block_left .newsletter-input::placeholder { color: #7c8ba4; }
/* el botón vuelve a ser un botón con palabras, no un icono */
#footer #newsletter_block_left .form-group .button-small {
  flex: 0 0 auto;
  height: 42px;
  margin-left: 0;
  padding: 0 20px;
  border: none;
  border-radius: 0 var(--mhp-radio) var(--mhp-radio) 0;
  background: var(--mhp-verde) !important;
  background-image: none !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .3px;
}
#footer #newsletter_block_left .form-group .button-small:hover { background: var(--mhp-verde-oscuro) !important; }
#footer #newsletter_block_left .form-group .button-small:before { content: none !important; display: none !important; }
#footer #newsletter_block_left .form-group .button-small span { display: inline !important; }
@media (max-width: 767px) {
  .footer-container #footer > .row { display: block; }
  #footer #newsletter_block_left .form-group { max-width: none; }
}

/* 9 — Bloque de ventajas (#cmsinfo_block) */
/* 9.2 — el tema le da padding-left:29px a la 2ª columna, pero la regla del
   28-jul (padding:0 en las columnas) se lo comía y el texto quedaba pegado a
   la línea de separación. Se devuelve, un poco más generoso. */
#cmsinfo_block > .col-xs-6 + .col-xs-6 { padding-left: 28px; }
/* 9.5 — el espacio muerto de abajo venía del min-height:344px que el tema le
   clava a esa 2ª columna (hermano del height:344px que ya se anuló el 1-ago) */
#cmsinfo_block > div + div { min-height: 0 !important; }
#cmsinfo_block { padding: 22px 26px 18px; }
/* 9.3 — menos separación entre Envíos / Atención al cliente / Novedad */
#cmsinfo_block ul > li { margin-bottom: 11px; }
#cmsinfo_block ul > li:last-child { margin-bottom: 0; }
#cmsinfo_block p, #cmsinfo_block li p { margin: 0 0 3px; }
#cmsinfo_block ol > li { margin-bottom: 6px; }
#cmsinfo_block ol > li:last-child { margin-bottom: 0; }
#cmsinfo_block ol > li:last-child br { display: none; }
/* 9.4 — titulares unificados: todos en MAYÚSCULAS */
#cmsinfo_block h3, #cmsinfo_block h4 {
  font-size: 14.5px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
#cmsinfo_block > .col-xs-6:last-child > h3 { font-size: 16px; }
/* 9.1 — "NOVEDAD EN EL SERVICIO / (COMUNIDAD DE MADRID)" a dos líneas: el
   salto lo mete mhp.js (el texto vive en la configuración del módulo) */
#cmsinfo_block h3 .mhp-2a-linea, #cmsinfo_block h4 .mhp-2a-linea { display: block; }

/* ============================================================
   E) FICHA DE PRODUCTO — repaso de Celia (4-ago-2026, 2ª tanda)
   Capturas "así está" / "como lo dejaría" en el chat de Teams.
   — Claudia, 4-ago-2026
   ============================================================ */

/* E1 — Fuera la duplicidad del escalón de volumen: la banda "3+ uds · X € ·
   Aplicar" repetía lo que ya dicen la chapa VOLUMEN y el botón "Añadir 3 uds"
   de debajo del carrito, que es el que incita a pulsar.
   Se OCULTA, no se borra del HTML: mhp.js lee sus filas para arreglar el PVPR
   y para recalcular el precio de compra al cambiar la cantidad. */
#product .mhp-descuentos-cantidad { display: none !important; }

/* E2 — Menos aire arriba: el título y la caja de compra suben. */
#product .primary_block { padding-top: 10px; }
#product .breadcrumb { margin-bottom: 10px; }

/* E3 — "Ver más grande": solo la lupa, que tapa menos el producto. */
#view_full_size .span_link {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  font-size: 0;               /* se come el texto, deja el icono */
  line-height: 34px;
  text-align: center;
}
#view_full_size .span_link::before,
#view_full_size .span_link::after {
  font-size: 15px;
  margin: 0;
  color: var(--mhp-verde-oscuro);
}

/* E4 — Botones de cantidad: cuadrados grandes a los lados del número, que se
   vean y se acierten con el dedo. */
#product .box-cart-bottom #quantity_wanted_p { gap: 8px; flex-wrap: wrap; }
#product .box-cart-bottom #quantity_wanted_p label {
  flex: 1 0 100%;
  margin: 0 0 4px;
  text-align: center;
}
#product .box-cart-bottom #quantity_wanted_p input#quantity_wanted {
  order: 2;
  width: 62px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: var(--mhp-radio);
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #2f3a2c;
}
#product .box-cart-bottom #quantity_wanted_p .product_quantity_down { order: 1; }
#product .box-cart-bottom #quantity_wanted_p .product_quantity_up { order: 3; }
#product .box-cart-bottom #quantity_wanted_p .product_quantity_down,
#product .box-cart-bottom #quantity_wanted_p .product_quantity_up {
  display: flex !important;
  align-items: center;
  justify-content: center;
  float: none;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mhp-verde);
  border-radius: var(--mhp-radio);
  background: var(--mhp-verde-claro);
  color: var(--mhp-verde-oscuro);
  transition: background .15s ease, color .15s ease;
}
#product .box-cart-bottom #quantity_wanted_p .product_quantity_down:hover,
#product .box-cart-bottom #quantity_wanted_p .product_quantity_up:hover {
  background: var(--mhp-verde);
  color: #fff;
}
#product .box-cart-bottom #quantity_wanted_p .product_quantity_down span,
#product .box-cart-bottom #quantity_wanted_p .product_quantity_up span { font-size: 15px; }

/* E5 — El recuadro de chapas se leía como un aviso de stock: se rotula.
   El overflow:hidden de .mhp-ventajas recortaba el rótulo por arriba. */
.mhp-ventajas-caja { position: relative; padding-top: 18px; overflow: visible; margin-top: 16px; }
.mhp-ventajas-caja .mhp-ventajas-titulo {
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--mhp-azul, #001133);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* E6 — Código de barras: dentro de la caja de compra y en chapa, para que no
   quede perdido (mhp.js lo coloca ahora bajo la línea de stock). */
#product .mhp-ficha-meta-abajo {
  grid-column: 1 / -1;
  margin: 8px 0 0;
}
#product .mhp-ficha-meta-abajo .mhp-ficha-ean {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 999px;
  background: #f6f7f5;
  font-size: 12px;
  color: #5d675b;
}
#product .mhp-ficha-meta-abajo .mhp-ficha-ean b { color: #2f3a2c; letter-spacing: .3px; }

/* E7 — Botones del lateral izquierdo centrados: "Añadir selección" y
   "Ver composición…". El segundo vive en un bloque a todo lo ancho, así que se
   centra dentro del ancho de la columna izquierda (col-md-5 = 41,66 %). */
#product .mhp-lote-pie { flex-direction: column; align-items: stretch; }
#product .mhp-lote-boton { align-self: center; }
/* el enlace vive a lo ancho: se centra dentro del ancho de la columna
   izquierda (col-md-5 = 41,66 %), que es donde lo pide Celia */
#product .mhp-ir-detalles { text-align: center; margin-right: 58.34%; }
@media (max-width: 991px) {
  #product .mhp-ir-detalles { margin-right: 0; }
}

/* ============================================================
   F) CHECKOUT (/pedido-rapido) — Fernando, 4-ago-2026
   "Que sea todo más responsive en una sola pantalla, más friendly":
   carrito compacto, direcciones/entrega/pago en tarjetas modernas, el
   empujón de la promoción arriba y los impuestos desglosados.
   — Claudia, 4-ago-2026
   ============================================================ */

/* F1 — Empujón: cuánto falta para el siguiente tramo por importe. */
.mhp-empujon {
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid var(--mhp-verde);
  border-radius: 12px;
  background: linear-gradient(100deg, var(--mhp-verde-claro), #f7fbf3 70%, #fff);
}
.mhp-empujon-texto { font-size: 14px; color: #3f4a3c; }
.mhp-empujon-texto b { color: var(--mhp-verde-oscuro); font-size: 15.5px; }
.mhp-empujon-barra {
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: #e4ebdd;
  overflow: hidden;
}
.mhp-empujon-barra > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mhp-verde), var(--mhp-verde-oscuro));
  transition: width .4s ease;
}
.mhp-empujon-ok { border-color: var(--mhp-verde-oscuro); }
.mhp-empujon-ok .mhp-empujon-texto::before {
  content: "✓";
  margin-right: 7px;
  font-weight: 700;
  color: var(--mhp-verde-oscuro);
}

/* F1b — MUNDOAHORRO: era una banda verde plana perdida entre el carrito y los
   recomendados. Ahora es una tarjeta dorada con la moneda delante y el importe
   grande, que es lo que el herbolario tiene que ver (Fernando, 4-ago-2026).
   El módulo pinta el fondo verde en un `style=` en el propio HTML: por eso hace
   falta !important. — Claudia, 4-ago-2026 */
#HOOK_SHOPPING_CART > .alert-success,
#order-detail-content + .alert-success {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 18px;
  padding: 16px 18px 16px 68px;
  border: 1px solid #e8c979 !important;
  border-radius: 12px;
  background: linear-gradient(100deg, #fff8e6, #fffdf7 70%, #fff) !important;
  color: #6b5417 !important;
  font-size: 15px;
  text-shadow: none;
  box-shadow: 0 1px 4px rgba(150, 116, 25, .12);
}
#HOOK_SHOPPING_CART > .alert-success::before {
  content: "€";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0b429;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}
#HOOK_SHOPPING_CART > .alert-success b {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  color: #a8730a;
}

/* Un clic es un pedido: el botón se apaga mientras se confirma. */
.mhp-enviando {
  opacity: .55 !important;
  pointer-events: none !important;
  cursor: progress !important;
  position: relative;
}

/* F2 — Resumen del carrito: el ahorro se ve, los impuestos se explican. */
#cart_summary tfoot .mhp-fila-ahorro td { color: var(--mhp-verde-oscuro); font-weight: 700; }
#cart_summary tfoot .mhp-fila-ahorro .price { color: var(--mhp-verde-oscuro); }
/* Resta a la vista (Fernando, 5-ago-2026): precio sin ofertas apagado y con
   tachado suave, el ahorro en verde; el total lo pone la fila de siempre de
   "Total (impuestos excl.)". — Claudia, 05-ago-2026 */
#cart_summary tfoot #mhp_sin_ofertas { color: #98a294; font-weight: 400; text-decoration: line-through; }
#cart_summary tfoot .mhp-fila-iva td { font-size: 12.5px; color: #7b8579; font-weight: 400; }
#cart_summary tfoot .mhp-fila-iva small { color: #98a294; font-size: 11.5px; }
#cart_summary tfoot .cart_total_price td { padding: 7px 12px; }
#cart_summary tfoot #total_price { font-size: 22px; color: var(--mhp-verde-oscuro); }

/* F3 — La tabla del carrito, más ligera: sin rejilla de bordes y con la foto
   pequeña, que aquí ya se sabe lo que se compra. */
#order-detail-content { border: 1px solid var(--mhp-gris-borde); border-radius: 12px; overflow: hidden; }
#cart_summary { margin: 0; border: none; }
#cart_summary > thead th {
  padding: 10px 12px;
  background: #f6f7f5;
  border: none !important;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #7b8579;
}
#cart_summary tbody td { border-color: #eef1ec !important; vertical-align: middle; padding: 10px 12px; }
#cart_summary tbody tr:hover { background: #fbfcfa; }
#cart_summary .cart_product img { max-width: 62px; height: auto; border-radius: 8px; }
#cart_summary .cart_description .product-name a { font-weight: 700; color: var(--mhp-texto); }
#cart_summary .cart_quantity input.cart_quantity_input {
  width: 46px;
  height: 34px;
  text-align: center;
  font-weight: 700;
  border-radius: var(--mhp-radio);
}
#cart_summary .cart_quantity .cart_quantity_down,
#cart_summary .cart_quantity .cart_quantity_up {
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 28px;
  border: 1px solid var(--mhp-verde);
  border-radius: var(--mhp-radio);
  background: var(--mhp-verde-claro);
  color: var(--mhp-verde-oscuro);
}

/* F4 — Recomendados: la MISMA tarjeta que la home (mhp-tarjeta.tpl), en un
   CARRUSEL con 5 a la vista y el resto detrás de las flechas
   (Fernando, 4-ago-2026). Reutiliza el carrusel del tema. */
#crossselling { border: none; padding: 0; margin: 22px 0 26px; }
/* ⚠️ El carril lleva TAMBIÉN las clases `product_list grid` — sin ellas las
   tarjetas pierden todo su estilo, que cuelga de `.product_list.grid .product-
   container`. Pero esa misma regla (`#center_column ul.product_list.grid`) es
   más específica que una clase suelta y convertía el carril en una rejilla de 4
   columnas con las tarjetas a 0 px de ancho (el churro del 4-ago). De ahí que
   estas reglas repitan la cadena entera. — Claudia, 4-ago-2026 */
/* ⚠️ NADA de scroll-snap ni de alturas al 100 % aquí: la tarjeta del tema es
   una rejilla con una fila `1fr` y `height:100%`; metida en un carril flexible
   con snap, el navegador entraba en un cálculo de layout sin fin y la pestaña
   se quedaba clavada (4-ago-2026, visto en Chrome). El carril es un flex
   normal, con `align-items:start`, y las tarjetas toman su altura natural.
   — Claudia, 4-ago-2026 */
/* ⚠️ Este bloque lo mueve `serialScroll` (jQuery), que es quien pone las
   flechas y enseña 5 de golpe: NO se puede convertir el <ul> en grid ni en flex
   —el plugin mide y desplaza los <li> uno a uno— y con la tarjeta completa del
   tema dentro (mhp-tarjeta.tpl) el navegador se quedaba clavado (4-ago-2026).
   Los <li> van en línea, con el ancho de 1/5, y el plugin hace el resto.
   — Claudia, 4-ago-2026 */
#center_column #crossselling #crossselling_list {
  overflow: hidden;
  white-space: nowrap;
}
#center_column #crossselling ul.mhp-recomendados-rejilla {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
#center_column #crossselling ul.mhp-recomendados-rejilla > li {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  width: 20%;
  padding: 0 7px !important;
  margin: 0 !important;
  float: none !important;
  border: none !important;
  background: none !important;
}
@media (max-width: 991px) { #center_column #crossselling ul.mhp-recomendados-rejilla > li { width: 33.33%; } }
@media (max-width: 767px) { #center_column #crossselling ul.mhp-recomendados-rejilla > li { width: 50%; } }
/* Tarjeta del recomendador del carrito: mismo aire que la de la home, pero
   propia y ligera. — Claudia, 4-ago-2026 */
#crossselling .mhp-reco-caja {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 290px;         /* todas las tarjetas iguales y el botón al pie */
  padding: 12px;
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
#crossselling .mhp-reco-foto { display: block; }
#crossselling .mhp-reco-foto img { max-height: 120px; width: auto; max-width: 100%; margin: 0 auto; }
#crossselling .mhp-reco-nombre {
  min-height: 48px;          /* 3 líneas: así los botones quedan a la misma altura */
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mhp-texto);
}
#crossselling .mhp-reco-pvpr { font-size: 11.5px; color: #98a294; }
#crossselling .mhp-reco-precio { font-size: 12px; color: #6b7280; }
#crossselling .mhp-reco-precio strong { display: block; font-size: 17px; color: var(--mhp-verde-oscuro); }
#crossselling .mhp-reco-precio s { font-size: 11.5px; }
#crossselling .mhp-reco-boton {
  margin-top: auto;
  padding: 8px 10px;
  border-radius: var(--mhp-radio);
  background: var(--mhp-verde-oscuro);
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700;
}
#crossselling .mhp-reco-boton:hover { background: var(--mhp-verde); }
/* Las flechas del plugin, visibles por encima de las tarjetas. */
#crossselling a#crossselling_scroll_left,
#crossselling a#crossselling_scroll_right {
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--mhp-gris-borde);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
#center_column #crossselling ul.product_list.grid.mhp-recomendados-rejilla::-webkit-scrollbar { display: none; }
#center_column #crossselling ul.product_list.grid.mhp-recomendados-rejilla > li {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 1199px) { #center_column #crossselling ul.product_list.grid.mhp-recomendados-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991px)  { #center_column #crossselling ul.product_list.grid.mhp-recomendados-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { #center_column #crossselling ul.product_list.grid.mhp-recomendados-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* F4b — Cantidad en la línea del carrito: número y +/− en una sola fila (el
   tema los apilaba en vertical al darles tamaño). — Claudia, 4-ago-2026 */
#cart_summary tbody td.cart_quantity {
  white-space: nowrap;
  text-align: center;
}
#cart_summary tbody td.cart_quantity .cart_quantity_input,
#cart_summary tbody td.cart_quantity .cart_quantity_button { display: inline-block; vertical-align: middle; }
#cart_summary tbody td.cart_quantity .cart_quantity_button { float: none; margin-left: 4px; }
#cart_summary tbody td.cart_quantity .cart_quantity_button a { display: inline-block; float: none; margin: 0 1px; }

/* F5 — Los tres pasos: rótulo limpio con su número en chapa redonda. */
#order-opc h2,
#order-opc .page-subheading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 12px;
  padding: 0;
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--mhp-texto);
}
#order-opc h2 .step_current,
#order-opc h2 .step_todo,
#order-opc h2 .step_done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mhp-verde-oscuro);
  color: #fff;
  font-size: 13px;
  font-style: normal;
}

/* Direcciones: dos tarjetas iguales, una al lado de otra. */
#order-opc ul#address_delivery,
#order-opc ul#address_invoice,
#order-opc .address.box {
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(31, 45, 26, .06);
  padding: 14px 16px;
}
#order-opc ul#address_delivery h3,
#order-opc ul#address_invoice h3 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #7b8579;
}
/* Botones de la ficha de dirección con la ropa del tema (eran los grises del
   PrestaShop de serie). — Claudia, 4-ago-2026 */
#order-opc #address_delivery .button,
#order-opc #address_invoice .button,
#order-opc #opc_account .button.button-small,
#order-opc a.button[href*="controller=address"] {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--mhp-verde-oscuro) !important;
  border-radius: var(--mhp-radio) !important;
  color: var(--mhp-verde-oscuro) !important;
  font-weight: 700;
  text-shadow: none !important;
  box-shadow: none !important;
}
#order-opc #address_delivery .button:hover,
#order-opc #address_invoice .button:hover,
#order-opc a.button[href*="controller=address"]:hover {
  background: var(--mhp-verde-oscuro) !important;
  color: #fff !important;
}
/* Cuando la facturación es la misma que la entrega, sobra enseñar la ficha dos
   veces: la esconde mhp.js y deja la primera bien rotulada. */
#order-opc ul#address_invoice.mhp-oculta { display: none !important; }
#order-opc .mhp-una-direccion #address_delivery { max-width: 520px; }

/* Entrega: cada transportista, una tarjeta seleccionable. */
#carrier_area .delivery_option { margin-bottom: 10px; }
#carrier_area .delivery_option table.resume {
  width: 100%;
  border: 1px solid var(--mhp-gris-borde) !important;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#carrier_area .delivery_option:hover > table.resume { border-color: var(--mhp-verde) !important; }
#carrier_area .delivery_option table.resume td { border: none !important; padding: 12px 14px; vertical-align: middle; }
#carrier_area .delivery_option_logo img { max-height: 34px; width: auto; }
#carrier_area .delivery_option_price { font-weight: 700; color: var(--mhp-verde-oscuro); }
#carrier_area input.delivery_option_radio { width: 18px; height: 18px; accent-color: #4a703b; }
#carrier_area .delivery_option_title { font-weight: 700; color: var(--mhp-texto); }

/* Pago: tarjetas con el logo grande y un punto de selección a la derecha. */
#opc_payment_methods .payment_module,
#HOOK_PAYMENT .payment_module {
  border: 1px solid var(--mhp-gris-borde);
  border-radius: 12px;
  background: #fff;
  margin: 0 0 10px;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#opc_payment_methods .payment_module:hover,
#HOOK_PAYMENT .payment_module:hover {
  border-color: var(--mhp-verde);
  box-shadow: 0 2px 8px rgba(74, 112, 59, .12);
}
/* ⚠️ Varios métodos traen su logo como IMAGEN DE FONDO repetida (el de remesa,
   `a.bankwire`, con background-size 65px). Al ensanchar la fila salía el logo
   en mosaico, quince veces (visto el 4-ago-2026). Se fija a la izquierda, sin
   repetir, y se le reserva sitio con el padding. — Claudia, 4-ago-2026 */
#opc_payment_methods .payment_module > a,
#HOOK_PAYMENT .payment_module > a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 14px 16px 14px 96px;
  border: none;
  background-repeat: no-repeat !important;
  background-position: 16px center !important;
  background-size: contain !important;
  font-weight: 600;
  color: var(--mhp-texto);
}
/* los que sí traen <img> no necesitan el hueco del fondo */
#opc_payment_methods .payment_module > a:has(img),
#HOOK_PAYMENT .payment_module > a:has(img) { padding-left: 16px; }
#opc_payment_methods .payment_module > a::after,
#HOOK_PAYMENT .payment_module > a::after {
  content: "";
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--mhp-gris-borde);
}
#opc_payment_methods .payment_module > a:hover::after,
#HOOK_PAYMENT .payment_module > a:hover::after { border-color: var(--mhp-verde-oscuro); }
#opc_payment_methods .payment_module img,
#HOOK_PAYMENT .payment_module img { max-height: 30px; width: auto; }

/* F5b — Móvil: la tabla del transportista se estrujaba en tres columnas de
   nada y el nombre salía palabra a palabra. Pasa a bloque: radio + logo en una
   línea, texto debajo y el precio al final. — Claudia, 4-ago-2026 */
@media (max-width: 767px) {
  /* Se mantiene la tabla (tocarla dejaba fuera el nombre y el precio): solo se
     reparten mejor las columnas y se recorta el logo. */
  #carrier_area .delivery_option table.resume td { padding: 8px 6px !important; font-size: 13px; }
  #carrier_area .delivery_option table.resume td.delivery_option_radio { width: 32px !important; }
  #carrier_area .delivery_option table.resume td.delivery_option_logo { width: 62px !important; }
  #carrier_area .delivery_option table.resume td.delivery_option_logo img { max-width: 54px; height: auto; }
  #carrier_area .delivery_option table.resume td.delivery_option_price { width: 56px !important; text-align: right; }
  /* la celda del texto se queda con todo lo demás */
  #carrier_area .delivery_option table.resume td:not(.delivery_option_radio):not(.delivery_option_logo):not(.delivery_option_price) {
    width: auto !important;
    word-break: normal;
  }
  #carrier_area .delivery_option_title { font-size: 13.5px; line-height: 1.25; }
}

/* F6 — En pantalla ancha, direcciones y entrega en paralelo: menos scroll y el
   pedido se ve "de una". Lo monta mhp.js (.mhp-opc-dos). */
@media (min-width: 992px) {
  .mhp-opc-dos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }
  .mhp-opc-dos > * { min-width: 0; }
}

/* --- Vista de LISTA de los listados (Fernando, 5-ago-2026) ---
   Estaba rota: el tema nuevo solo vestía la cuadrícula y la lista heredaba
   retales del tema viejo (columnas estrechas solapadas). Fila horizontal:
   foto pequeña · nombre · precio · botones de compra. — Claudia, 05-ago-2026 */
#center_column ul.product_list.list { display: block; }
#center_column ul.product_list.list > li {
  width: 100% !important; max-width: 100%; float: none;
  padding: 0; margin: 0 0 10px;
}
#center_column .product_list.list .product-container {
  display: flex; align-items: center; gap: 18px; text-align: left;
  background: #fff; border: 1px solid #e3e8e0; border-radius: 6px;
  padding: 10px 16px; height: auto; min-height: 0; overflow: visible;
}
#center_column .product_list.list .left-block { flex: 0 0 90px; width: 90px; }
#center_column .product_list.list .product-image-container {
  width: 90px; height: 90px; padding: 0; margin: 0; text-align: center;
}
#center_column .product_list.list .product-image-container img {
  max-width: 90px; max-height: 90px; width: auto; height: auto; margin: 0 auto;
}
#center_column .product_list.list .right-block {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 18px; padding: 0;
}
#center_column .product_list.list .right-block h5 {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 0;
}
#center_column .product_list.list .product-name {
  font-size: 13.5px; line-height: 1.35; height: auto; max-height: none;
}
/* En la fila no caben ni hacen falta: descripción, reseñas y flags */
#center_column .product_list.list .product-desc,
#center_column .product_list.list .hook-reviews,
#center_column .product_list.list .product-flags,
#center_column .product_list.list .color-list-container,
#center_column .product_list.list .mhp-ver-producto { display: none !important; }
/* La foto del left-block lleva otro content_price clonado (el de la
   cuadrícula): en lista solo vale el del right-block */
#center_column .product_list.list .left-block .content_price { display: none !important; }
#center_column .product_list.list .right-block .content_price {
  flex: 0 0 auto; margin: 0; padding: 0; text-align: right; width: auto;
}
#center_column .product_list.list .button-container {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 0; white-space: nowrap;
}
#center_column .product_list.list .button-container .text {
  width: 52px; height: 34px; text-align: center; margin: 0;
}
#center_column .product_list.list .mhp-stock-crudo { display: none; }
/* Neutralizar el layout del tema viejo para .list (floats y anchos de columna) */
#center_column .product_list.list .left-block,
#center_column .product_list.list .right-block { float: none; padding: 0; margin: 0; }
/* La caja verde del Precio de Compra, como en la cuadrícula */
#center_column .product_list.list .right-block .content_price .price.product-price {
  display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: #6b7280;
}
#center_column .product_list.list .divPrecioOcultoBDG {
  position: static; margin: 0; padding: 7px 12px; min-width: 175px;
  border: 1px solid var(--mhp-verde); border-radius: 10px;
  background: var(--mhp-verde-claro); text-align: left;
}
#center_column .product_list.list .divPrecioOcultoBDG > div:first-child {
  padding: 0 0 2px !important; font-size: 10.5px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--mhp-verde-oscuro);
}
#center_column .product_list.list .divPrecioOcultoBDG #ecotax_price_display,
#center_column .product_list.list .divPrecioOcultoBDG .mhp-precio-compra {
  font-size: 17px !important; font-weight: 800 !important; color: #24421a;
}
#center_column .product_list.list .old-price { font-size: 12px; color: #9aa694; }
#center_column .product_list.list .price-percent-reduction {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  background: #c81e0f; color: #fff; font-size: 11.5px; font-weight: 700;
}
@media (max-width: 767px) {
  #center_column .product_list.list .right-block { flex-wrap: wrap; gap: 10px; }
}

/* --- Aviso discreto de "añadido al carrito" (sustituye al popup layer_cart,
   Fernando 5-ago-2026). El popup queda oculto de cinturón por si algún flujo
   no parcheado intenta enseñarlo. — Claudia, 05-ago-2026 --- */
#layer_cart, .layer_cart_overlay { display: none !important; }
#mhp-aviso-carrito {
  position: fixed; top: 86px; right: 24px; z-index: 5000;
  background: var(--mhp-verde-oscuro, #2f6b2f); color: #fff;
  padding: 10px 16px; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  font-size: 13px; max-width: 320px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#mhp-aviso-carrito b { display: block; font-size: 13.5px; }
#mhp-aviso-carrito span {
  display: block; margin-top: 2px; font-size: 12px; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mhp-aviso-carrito.mhp-aviso-visible { opacity: 1; transform: translateY(0); }
@keyframes mhp-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.shopping_cart.mhp-carrito-pulso { animation: mhp-pulso .45s ease; }

/* --- Listados más limpios (Fernando, 5-ago-2026) ---
   1) Fuera el comparador: el botón verde "Comparar (0)" y los enlaces
      "Añadir para comparar" no pintan nada en un B2B.
   2) La paginación solo ABAJO: la fila superior ("Mostrando 1-24" + números)
      sobraba — los controles quedan en una sola fila (Ordenar · Mostrar · Vista).
   — Claudia, 05-ago-2026 */
.compare-form, .bt_compare, .add_to_compare,
.functional-buttons .compare { display: none !important; }
.content_sortPagiBar .top-pagination-content { display: none !important; }

/* --- Chips de gama en la página de marca: estado activo + quitar filtro
   (Fernando, 5-ago-2026; ?gama= lo resuelve el override de
   ManufacturerController, patrón Rosana) --- */
.mhp-subcat-activa {
  background: var(--mhp-verde-oscuro, #2f6b2f) !important;
  color: #fff !important; border-color: var(--mhp-verde-oscuro, #2f6b2f) !important;
}
.mhp-subcat-activa span { color: #d8e8d4 !important; }
.mhp-subcat-quitar { border-style: dashed !important; color: #8a2f24 !important; }

/* --- Mis solicitudes (mailalerts) — Fernando, 5-ago-2026 --- */
/* campanita SOLO icono, sin texto (Fernando, 5-ago): el nombre del enlace se
   esconde con font-size 0 y el ::before pinta la campana a tamaño normal */
#block_top_menu a[href*="mailalerts/account"] { font-size: 0 !important; padding: 9px 10px !important; }
#block_top_menu a[href*="mailalerts/account"]::before { content: "\1F514"; font-size: 15px; line-height: 1; vertical-align: middle; }
/* la página, sin columnas laterales y a ancho completo */
#module-mailalerts-account #left_column,
#module-mailalerts-account #right_column { display: none !important; }
#module-mailalerts-account #center_column { width: 100% !important; }
.mhp-solicitudes-intro { color: #6c7a64; margin: 6px 0 18px; }
.mhp-solicitud {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #e3e8e0; border-radius: 6px;
  padding: 10px 16px; margin-bottom: 10px;
}
.mhp-solicitud-img img { max-width: 64px; max-height: 64px; }
.mhp-solicitud-datos { flex: 1 1 auto; min-width: 0; }
.mhp-solicitud-nombre { font-weight: 600; color: var(--mhp-texto, #2f3a2c); }
.mhp-solicitud-atr { font-size: 12px; color: #7b8579; }
.mhp-solicitud-meta { font-size: 12.5px; color: #6c7a64; margin-top: 3px; }
.mhp-solicitud-yahay { color: var(--mhp-verde-oscuro, #2f6b2f); font-weight: 700; }
.mhp-solicitud-pte { color: #b98900; font-weight: 600; }
.mhp-solicitud-pedido { color: var(--mhp-verde-oscuro, #2f6b2f); font-weight: 600; }
.mhp-solicitud-quitar {
  flex: 0 0 auto; font-size: 22px; line-height: 1; color: #9aa694;
  padding: 6px 10px; text-decoration: none;
}
.mhp-solicitud-quitar:hover { color: #c81e0f; }

/* --- Ofertas activas de la ficha, tanda Celia 5-ago-2026 --- */
/* aviso de unidades clicable: mete esas uds al carrito */
.mhp-ventaja-click { cursor: pointer; }
.mhp-ventaja-click:hover { background: #eef6ea; }
.mhp-ventaja-anadir {
  margin-left: auto; flex: 0 0 auto; align-self: center;
  font-size: 11px; font-weight: 700; color: var(--mhp-verde-oscuro, #2f6b2f);
  border: 1px solid var(--mhp-verde, #63a05e); border-radius: 999px; padding: 2px 8px;
  white-space: nowrap;
}
.mhp-ventaja-click:hover .mhp-ventaja-anadir { background: var(--mhp-verde-oscuro, #2f6b2f); color: #fff; }
/* descuento plano por unidad pintado como precio específico */
.mhp-dto-plano-old { display: inline-block; margin-right: 6px; }
.mhp-dto-plano-old .price { text-decoration: line-through; color: #9aa694; font-size: 15px; }
.mhp-dto-plano-badge {
  display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px;
  background: #c81e0f; color: #fff; font-size: 12.5px; font-weight: 700; vertical-align: middle;
}

/* ============================================================
   MÓVIL 2.0 — rediseño de la versión móvil (Fernando, 6-ago-2026)
   Cabecera fija con iconos + home compacta + ficha reordenada.
   TODO acotado a ≤767px: el escritorio aprobado no se toca.
   — Claudia, 6-ago-2026
   ============================================================ */

/* Piezas nuevas del header: invisibles en escritorio */
.mhp-burger, .mhp-icos { display: none; }
#mhp-sticky-cart { display: none; }

@media (max-width: 767px) {

  /* Nada puede ensanchar el layout en móvil: un desborde horizontal (los
     carruseles de la ficha) hacía zoom-out en el iPhone, y con ello la
     cabecera fija medía de menos y el sticky de añadir quedaba fuera de
     pantalla. Cinturón general + contención del carrusel. */
  html, body { overflow-x: hidden; }
  .mhp-carrusel { min-width: 0; max-width: 100%; overflow: hidden; }
  .mhp-carrusel-track { max-width: 100%; }

  /* ---------- 1. CABECERA FIJA ---------- */
  /* Sticky sobre el contenedor entero: la barra marino de sesión se oculta
     (su función pasa al icono de perfil) y queda logo+iconos+buscador. */
  .header-container {
    position: sticky;
    top: 0;
    z-index: 1500;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  }
  #header .nav { display: none; }

  .mhp-header-main { padding: 8px 0; }
  .mhp-header-main .row { flex-wrap: wrap; align-items: center; gap: 0 8px; }

  /* Orden: hamburguesa · logo · campana/perfil · carrito · buscador · menú */
  #mhp-burger { order: 1; }
  .mhp-header-main #header_logo { order: 2; flex: 1 1 auto; }
  .mhp-icos { order: 3; }
  .mhp-header-main .col-sm-4 { order: 4; }
  .mhp-header-main #search_block_top { order: 5; flex: 1 1 100%; margin-top: 8px; }
  .mhp-header-main #block_top_menu { order: 6; }

  /* Hamburguesa */
  #mhp-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    background: #fff;
    border: 1px solid var(--mhp-gris-borde);
    border-radius: 8px;
    cursor: pointer;
    flex: 0 0 auto;
  }
  #mhp-burger span {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background: var(--mhp-marino);
    transition: transform .18s ease, opacity .18s ease;
  }
  #mhp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  #mhp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  #mhp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Logo: vuelve el logotipo horizontal completo, en pequeño (diseño 6-ago) */
  .mhp-logo-full { display: block !important; width: 148px; height: auto; }
  .mhp-logo-simbolo, .mhp-logo-texto { display: none !important; }
  .mhp-header-main #header_logo { padding: 0 !important; margin: 0 !important; }

  /* Iconos campana + perfil (la regla base del header pone order:5 a todos
     los hijos de la fila con más especificidad — se le gana aquí) */
  .mhp-header-main .row > .mhp-icos { order: 3; }
  .mhp-icos { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
  .mhp-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 42px;
    color: var(--mhp-marino);
  }
  .mhp-ico:hover, .mhp-ico:focus { color: var(--mhp-marino); }
  .mhp-ico svg { width: 24px; height: 24px; }
  .mhp-ico-dot {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f0b400;
    border: 1.5px solid #fff;
  }
  .mhp-ico-dot[hidden] { display: none; }

  /* Carrito: solo icono con globo contador (sin pastilla verde) */
  .mhp-header-main .col-sm-4 { flex: 0 0 auto; align-self: center; }
  #header .shopping_cart { width: auto; padding: 0 !important; margin: 0 !important; }
  #header .shopping_cart > a:first-child {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    background: none !important;
    color: var(--mhp-marino) !important;
    border-radius: 8px;
  }
  #header .shopping_cart > a:first-child b,
  #header .shopping_cart > a:first-child .ajax_cart_no_product,
  #header .shopping_cart > a:first-child .ajax_cart_product_txt,
  #header .shopping_cart > a:first-child .ajax_cart_product_txt_s,
  #header .shopping_cart > a:first-child .ajax_cart_total { display: none !important; }
  /* el bloque del carrito no trae icono (solo el texto "Carrito", oculto):
     se pinta un carro SVG marino como fondo del enlace */
  #header .shopping_cart > a:first-child::before {
    content: "";
    width: 25px;
    height: 25px;
    background: var(--mhp-marino);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1.6"/><circle cx="19" cy="21" r="1.6"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57L22.5 7H5.12"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1.6"/><circle cx="19" cy="21" r="1.6"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57L22.5 7H5.12"/></svg>') center / contain no-repeat;
  }
  #header .shopping_cart > a:first-child .icon-shopping-cart,
  #header .shopping_cart > a:first-child .shopping_cart_icon {
    font-size: 24px;
    color: var(--mhp-marino);
  }
  #header .shopping_cart > a:first-child .ajax_cart_quantity {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--mhp-verde);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
  }
  /* Animación al añadir un producto (la dispara mhp.js) */
  #header .shopping_cart .ajax_cart_quantity.mhp-bump { animation: mhp-bump .5s ease; }

  /* Buscador limpio: solo campo + lupa */
  #search_block_top .mhp-search-brand { display: none !important; }
  #search_block_top form { flex-wrap: nowrap; gap: 0; }
  #search_block_top .search_query {
    height: 44px;
    border: 1.5px solid var(--mhp-gris-borde);
    border-right: none;
    border-radius: 10px 0 0 10px !important;
    font-size: 14px;
    padding: 0 12px;
  }
  #search_block_top .button-search {
    height: 44px;
    width: 54px;
    border-radius: 0 10px 10px 0;
    background: var(--mhp-verde);
    border: none;
  }

  /* Menú: lo abre la hamburguesa; fuera el botón "MENÚ" a lo ancho */
  #block_top_menu .cat-title { display: none !important; }
  #block_top_menu.sf-contener { margin-bottom: 0; }
  /* La lista desplegada no puede comerse más que la pantalla: scroll propio */
  #block_top_menu ul.sf-menu.menu-content { max-height: calc(100vh - 120px); overflow-y: auto; }

  /* ---------- 2. HOME COMPACTA ---------- */

  /* Accesos: 4 en una fila, icono pequeño encima, sin subtítulos */
  .mhp-accesos { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }
  .mhp-acceso { flex-direction: column; gap: 6px; padding: 10px 4px; text-align: center; }
  .mhp-acceso-icono { flex: 0 0 32px; width: 32px; height: 32px; font-size: 15px; line-height: 32px; }
  .mhp-acceso-texto { align-items: center; }
  .mhp-acceso-texto small { display: none; }
  .mhp-acceso-texto strong { font-size: 12px; line-height: 1.2; }

  /* Carruseles de la home (habituales, más vendido, ofertas): UNA línea con
     scroll lateral; se ven 2 tarjetas y pico para invitar al gesto. Solo en
     la home: las categorías siguen con su rejilla de 2 columnas. */
  #index .mhp-ofertas ul.product_list.grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding-bottom: 4px;
  }
  #index .mhp-ofertas ul.product_list.grid::-webkit-scrollbar { display: none; }
  #index .mhp-ofertas ul.product_list.grid > li { scroll-snap-align: start; }

  /* Bloque Info MH (envío urgente / atención / pagos): fuera las 3 imágenes
     grandes (items 1-3 de themeconfigurator); en su lugar se enseña el
     bloque de iconos + texto (#cmsinfo_block), que el tema viejo ocultaba
     en móvil. Los banners finales (items 4-5) se quedan, a lo ancho. */
  #index #htmlcontent_home .htmlcontent-item-1,
  #index #htmlcontent_home .htmlcontent-item-2,
  #index #htmlcontent_home .htmlcontent-item-3 { display: none; }
  #index #htmlcontent_home .htmlcontent-home > li {
    width: 100%;
    float: none;
    padding: 0 0 10px;
  }
  #index #htmlcontent_home .htmlcontent-home > li img { width: 100%; height: auto; }
  #index #cmsinfo_block { display: flex !important; padding: 16px 14px; gap: 14px; }
  #index #cmsinfo_block img { display: none !important; }
  #index #cmsinfo_block ul > li { gap: 10px; margin-bottom: 12px; }
  #index #cmsinfo_block em[class^="icon-"] {
    flex: 0 0 36px;
    height: 36px;
    font-size: 16px;
    line-height: 36px;
  }
  #index #cmsinfo_block h3, #index #cmsinfo_block h4 { font-size: 14px; }
  #index #cmsinfo_block p, #index #cmsinfo_block li p { font-size: 12.5px; line-height: 1.45; }

  /* ---------- 3. FICHA DE PRODUCTO ---------- */

  /* El orden (título · imagen · enlace composición · compra · descripción ·
     código de barras · llévatelo junto · marca) lo monta mhp.js moviendo el
     DOM: el JS de escritorio ya reagrupa columnas (.mhp-col-der) y una
     reordenación por CSS pelearía con él. Aquí solo estilos. */
  #product .primary_block > .container { display: none; } /* top-hr decorativo */
  #product .pb-center-column h1 { font-size: 19px; line-height: 1.3; margin: 6px 0 8px; }
  #product .mhp-ir-detalles-mov { margin: 2px 0 8px; }

  /* Duplicados que en móvil no aportan: la etiqueta suelta de stock (ya está
     en la caja de compra) */
  #product #availability_statut { display: none; }

  /* Migas en una sola línea (el recorte del medio lo hace mhp.js) */
  .breadcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Caja de compra compacta */
  #product .box-info-product { margin-top: 4px; }
  #product .content_prices { padding: 8px 10px 4px; }
  #product .our_price_display { font-size: 14px; margin-bottom: 2px; }
  #product .divPrecioOcultoBDG { padding: 6px 8px; }
  #product .precioOcultoBDGPrecio { font-size: 15px; }
  #product .divPrecioOcultoBDGIVA { font-size: 11px; }

  /* Ofertas activas compactas: fuera las chapas de texto ("SIEMPRE EN
     OFERTA", "OFERTA 3+1"…), en su lugar un icono redondo de oferta.
     El "＋ Añadir" pasa a ser solo el símbolo +. Todo centrado. */
  #product .mhp-ventajas-caja .mhp-ventaja { align-items: center; gap: 8px; padding: 7px 9px; }
  #product .mhp-ventajas-caja .mhp-ventaja-chapa { display: none; }
  #product .mhp-ventajas-caja .mhp-ventaja:not(.mhp-ventaja-img)::before {
    content: "%";
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: #c81e0f;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
  }
  #product .mhp-ventajas-caja .mhp-ventaja-txt { font-size: 12.5px; line-height: 1.35; }
  #product .mhp-ventajas-caja .mhp-ventaja-anadir {
    flex: 0 0 30px;
    height: 30px;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  #product .mhp-ventajas-caja .mhp-ventaja-anadir::before { content: "+"; font-size: 19px; font-weight: 700; line-height: 1; }

  /* Descripción: 3 líneas y "ver más" (el desplegado lo hace mhp.js) */
  #product #short_description_content.mhp-desc-recortada {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mhp-ver-mas-desc {
    display: inline-block;
    margin: 4px 0 0;
    background: none;
    border: none;
    padding: 0;
    color: var(--mhp-azul);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Llévatelo junto: horizontal y compacto, manteniendo las fotos */
  #product .mhp-lote { padding: 10px; }
  #product .mhp-lote-fila { overflow-x: auto; flex-wrap: nowrap; gap: 6px; -webkit-overflow-scrolling: touch; }
  #product .mhp-lote-item { flex: 0 0 96px; }
  #product .mhp-lote-foto img { max-height: 64px; }
  #product .mhp-lote-nombre { font-size: 10.5px; line-height: 1.2; }
  #product .mhp-lote-pie { flex-wrap: wrap; gap: 8px; }

  /* Tarjeta de marca: logo a la izquierda, categorías a la derecha,
     botón "ver toda la marca" debajo (diseño 6-ago) */
  #product .mhp-marca-ficha { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px; flex-wrap: wrap; }
  #product .mhp-marca-ficha-logo { flex: 0 0 96px; width: 96px; padding: 8px; }
  #product .mhp-marca-ficha-logo img { max-height: 56px; }
  #product .mhp-marca-ficha-desc, #product .mhp-marca-ficha-datos { display: none; }
  #product .mhp-marca-ficha-texto { flex: 1 1 140px; }
  #product .mhp-marca-ficha-cats { margin-bottom: 8px; }
  #product .mhp-marca-ficha-cats a:nth-of-type(n+4) { display: none; } /* solo 3 categorías */
  #product .mhp-marca-ficha-boton { align-self: stretch; flex: 1 1 100%; text-align: center; }

  /* Bloques de recomendados: solo "Suelen comprarlo juntos"
     (la clase la pone mhp.js mirando el título) */
  #product .mhp-carrusel.mhp-oculto-movil { display: none; }

  /* Más información: desplegables (los abre y cierra mhp.js) */
  #product #mhp-detalles .page-product-box { margin-bottom: 10px; }
  #product #mhp-detalles .page-product-heading {
    position: relative;
    margin: 0;
    cursor: pointer;
    padding-right: 40px !important;
  }
  #product #mhp-detalles .page-product-heading::after {
    content: "+";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    color: var(--mhp-verde-oscuro);
  }
  #product #mhp-detalles .mhp-plegado > *:not(.page-product-heading) { display: none; }
  #product #mhp-detalles .page-product-box:not(.mhp-plegado) .page-product-heading::after { content: "−"; }

  /* ---------- 4. STICKY "AÑADIR A MI CESTA" (lo inyecta mhp.js) ---------- */
  #mhp-sticky-cart {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1400;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--mhp-gris-borde);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .12);
    transform: translateY(110%);
    transition: transform .22s ease;
  }
  #mhp-sticky-cart.mhp-visible { transform: translateY(0); }
  #mhp-sticky-cart .mhp-sticky-precio { display: flex; flex-direction: column; line-height: 1.15; flex: 0 0 auto; }
  #mhp-sticky-cart .mhp-sticky-precio s { color: #c04a3d; font-size: 12.5px; }
  #mhp-sticky-cart .mhp-sticky-precio strong { font-size: 19px; color: var(--mhp-texto); }
  #mhp-sticky-cart .mhp-sticky-boton {
    flex: 1 1 auto;
    height: 46px;
    border: none;
    border-radius: 10px;
    background: var(--mhp-verde);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
  }
  #mhp-sticky-cart .mhp-sticky-boton:active,
  #mhp-sticky-cart .mhp-sticky-boton.mhp-pressed { background: var(--mhp-verde-oscuro); transform: scale(.97); }
  /* que el sticky no tape el final de la página */
  body#product { padding-bottom: 70px; }
}

@keyframes mhp-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  70% { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* ============================================================
   MÓVIL 2.1 — ajustes de Fernando del 7-ago-2026 sobre el
   rediseño del 6-ago. Va DESPUÉS del bloque MÓVIL 2.0 para
   poder corregirlo sin reescribirlo. Todo acotado a ≤767px.
   — Claudia, 7-ago-2026
   ============================================================ */

@media (max-width: 767px) {

  /* ---------- 1. CABECERA FIJA DE VERDAD ----------
     El `position: sticky` del 6-ago nunca llegó a pegar: `html, body {
     overflow-x: hidden }` (el cinturón anti-desborde) convierte al body en
     contenedor de scroll y deja al sticky sin nada a lo que agarrarse.
     Se pasa a `fixed`, que no depende de ningún ancestro, y mhp.js compensa
     con un hueco del alto exacto de la cabecera. */
  .header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* por encima del sticky de añadir (1400) y de las capas del tema */
    z-index: 1600;
  }
  /* hueco que deja el hermano fijo; el alto lo escribe mhp.js */
  #page { padding-top: var(--mhp-alto-cabecera, 115px); }

  /* ---------- 2. LOS ICONOS Y EL CARRITO, EN UNA SOLA LÍNEA ----------
     Con flex + wrap el carrito caía a una segunda línea en cuanto el móvil
     era un poco estrecho. Con rejilla explícita no puede: la primera fila
     tiene sus cuatro huecos y el logo es el único que se encoge. */
  .mhp-header-main .row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "burger logo icos carrito"
      "buscador buscador buscador buscador"
      "menu menu menu menu";
    align-items: center;
    column-gap: 6px;
    row-gap: 8px;
  }
  .mhp-header-main .row > #mhp-burger { grid-area: burger; }
  .mhp-header-main .row > #header_logo { grid-area: logo; min-width: 0; }
  .mhp-header-main .row > .mhp-icos { grid-area: icos; }
  .mhp-header-main .row > .col-sm-4:not(#search_block_top) { grid-area: carrito; }
  .mhp-header-main .row > #search_block_top { grid-area: buscador; margin-top: 0; }
  .mhp-header-main .row > #block_top_menu { grid-area: menu; }
  /* el logo cede espacio antes que nadie */
  .mhp-logo-full { width: auto !important; max-width: 100%; max-height: 36px; }
  /* iconos un pelín más estrechos, para que quepa todo hasta en 320 px */
  .mhp-ico { width: 36px; }

  /* ---------- 3. EL CARRITO SE ABRE COMO PANEL, NO COMO PEGATINA ----------
     Antes el desplegable era absoluto dentro del icono (42 px de ancho) y
     salía ilegible. Ahora es un panel centrado al 80 % de la pantalla, con
     la lista con scroll propio y los botones anclados abajo. */
  #header .shopping_cart .cart_block {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    /* el tema deja el bloque en z-index 1300 y el velo se le ponía encima */
    z-index: 2100 !important;
    border: none;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .3);
    overflow: hidden;
  }
  /* lo abre y cierra mhp.js con esta clase: en táctil el :hover del tema
     dejaba el panel pegado y sin manera de cerrarlo */
  #header .shopping_cart .cart_block { display: none !important; }
  #header .shopping_cart.mhp-cart-abierto .cart_block { display: flex !important; flex-direction: column; }
  #header .shopping_cart .cart_block > .block_content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
  }
  /* ojo: en este tema los totales y los botones van DENTRO de
     .cart_block_list, no como hermanos suyos. Lo que tiene que llevar scroll
     es solo la lista de productos (dl.products); si se le pone el scroll al
     contenedor, los botones se van con él. */
  #header .shopping_cart .cart_block .cart_block_list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }
  #header .shopping_cart .cart_block .cart_block_list > dl.products {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 10px 12px;
  }
  #header .shopping_cart .cart_block .cart-prices {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-top: 1px solid var(--mhp-gris-borde);
  }
  #header .shopping_cart .cart_block .cart-buttons {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mhp-gris-borde);
  }
  #header .shopping_cart .cart_block .cart-buttons > a {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    margin: 0;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    text-align: center;
  }
  #header .shopping_cart .cart_block .cart-buttons > a.mhp-cart-ir {
    background: #fff;
    color: var(--mhp-marino);
    border: 1.5px solid var(--mhp-marino);
  }
  #header .shopping_cart .cart_block #button_order_cart {
    background: var(--mhp-verde);
    border: none;
    color: #fff;
  }
  /* cabecera del panel con el botón de cerrar (lo inyecta mhp.js) */
  .mhp-cart-cab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mhp-gris-borde);
    font-size: 15px;
    font-weight: 700;
    color: var(--mhp-marino);
  }
  .mhp-cart-cerrar {
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f2f5ef;
    color: var(--mhp-marino);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .mhp-cart-fondo {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2050;
    background: rgba(0, 0, 0, .45);
  }

  /* ---------- 4. HOME: EL SLIDER DE BANNERS VUELVE A VERSE ----------
     Medía 0×0: el carril del slider crea contexto de formato propio (por su
     `overflow-x: auto`) y se encogía a cero para esquivar el `float: right`
     del bloque de banners pequeños que tiene delante. Con la columna en flex
     no hay floats que esquivar, y de paso el slider queda donde toca:
     debajo del titular y encima de los banners chicos. */
  #index #top_column { display: flex; flex-direction: column; }
  #index #top_column > #editorial_block_center { order: 1; }
  #index #top_column > #mhp-slider { order: 2; clear: both; float: none; width: 100%; }
  #index #top_column > #htmlcontent_top { order: 3; float: none; width: 100%; }

  /* ---------- 5. BLOQUE INFO MH: SOLO TÍTULOS, DESPLEGABLES ----------
     (lo que Fernando llama "el footer" de la home). Las clases las pone
     mhp.js; aquí solo el aspecto. */
  #index #cmsinfo_block { flex-direction: column; gap: 0; height: auto; }
  /* Ojo con el `flex: 1 1 340px` que las columnas traen de escritorio: al
     poner el bloque en vertical, ese 340px deja de ser ANCHO y pasa a ser
     ALTO, y con todo plegado quedaban dos huecos enormes en blanco. */
  #index #cmsinfo_block > div {
    flex: 0 0 auto;
    width: 100%;
    padding: 0;
    float: none;
    height: auto !important;
    min-height: 0 !important;
  }
  #index #cmsinfo_block ul { margin: 0; padding: 0; list-style: none; }
  #index #cmsinfo_block .mhp-info-item {
    margin: 0 0 8px;
    border: 1px solid var(--mhp-gris-borde);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
  }
  #index #cmsinfo_block .mhp-info-cab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 13px 44px 13px 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mhp-verde-oscuro);
    text-transform: uppercase;
    letter-spacing: .2px;
    cursor: pointer;
  }
  #index #cmsinfo_block .mhp-info-cab::after {
    content: "+";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    color: var(--mhp-verde-oscuro);
  }
  #index #cmsinfo_block .mhp-info-item:not(.mhp-plegado) .mhp-info-cab::after { content: "−"; }
  #index #cmsinfo_block .mhp-info-cuerpo { padding: 0 14px 12px; }
  #index #cmsinfo_block .mhp-info-item.mhp-plegado .mhp-info-cuerpo { display: none; }
  #index #cmsinfo_block .mhp-info-cuerpo p,
  #index #cmsinfo_block .mhp-info-cuerpo li { font-size: 12.5px; line-height: 1.5; }
  /* el icono redondo del tema, dentro de la cabecera */
  #index #cmsinfo_block .mhp-info-cab em[class^="icon-"] {
    flex: 0 0 30px;
    height: 30px;
    margin: 0;
    font-size: 14px;
    line-height: 30px;
  }

  /* ---------- 6. MENÚ: MARCAS · OFERTAS · CAMPANITA EN UNA LÍNEA ----------
     Los 3 enlaces sueltos del final del menú los agrupa mhp.js en un
     <li class="mhp-menu-botones">.
     El tema fuerza `display:block !important` en cada <li> del menú móvil y
     `background/color/padding !important` en sus enlaces: para ganarle hay que
     ir también con !important (la especificidad ya es mayor por el id). */
  #block_top_menu .mhp-menu-botones {
    display: flex !important;
    gap: 8px;
    padding: 10px;
    background: var(--mhp-verde-oscuro);
  }
  #block_top_menu .mhp-menu-botones > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 0;
    height: 44px;
    width: auto;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none;
  }
  #block_top_menu .mhp-menu-botones > .mhp-menu-marcas {
    background: #fff !important;
    color: var(--mhp-marino) !important;
  }
  #block_top_menu .mhp-menu-botones > .mhp-menu-ofertas {
    background: #c81e0f !important;
    color: #fff !important;
  }
  /* la campanita: solo icono y más estrecha que las otras dos */
  #block_top_menu .mhp-menu-botones > .mhp-menu-campana {
    flex: 0 0 68px;
    background: #f0b400 !important;
    color: #4a3c00 !important;
    font-size: 0;
  }
  #block_top_menu .mhp-menu-botones > .mhp-menu-campana::before {
    content: "";
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>') center / contain no-repeat;
  }

  /* ---------- 7. FICHA: CANTIDAD Y AÑADIR, DENTRO DEL BLOQUE DE PRECIO ----
     mhp.js mete .box-cart-bottom dentro de .content_prices y saca de ahí el
     Mundoahorro, que pasa a tarjeta justo debajo del botón. */
  #product .content_prices .box-cart-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--mhp-gris-borde);
  }
  #product .content_prices .box-cart-bottom #quantity_wanted_p {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
  }
  #product .content_prices .box-cart-bottom #quantity_wanted_p label { display: none; }
  #product .content_prices .box-cart-bottom #quantity_wanted.text {
    width: 46px;
    height: 42px;
    margin: 0;
    text-align: center;
  }
  #product .content_prices .box-cart-bottom .button-minus,
  #product .content_prices .box-cart-bottom .button-plus { width: 38px; height: 42px; margin: 0; }
  #product .content_prices .box-cart-bottom > div { flex: 1 1 auto; min-width: 0; margin: 0; }
  #product .content_prices .box-cart-bottom #add_to_cart { width: 100%; margin: 0; }
  #product .content_prices .box-cart-bottom #add_to_cart button { width: 100%; }
  /* Mundoahorro, con el mismo lenguaje visual que "ofertas activas" */
  #product .content_prices .mhp-ahorro.mhp-ahorro-tarjeta {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 10px 0 0;
    padding: 9px 12px;
    border: 1px solid #f0d68a;
    border-radius: var(--mhp-radio);
    background: #fdf7e4;
  }
  #product .content_prices .mhp-ahorro.mhp-ahorro-tarjeta::before {
    content: "";
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: #f0b400;
  }

  /* ---------- 8. OFERTAS ACTIVAS: DE VERDAD EN UNA LÍNEA ----------
     Una regla `@media (max-width: 480px)` del tema ponía `flex-wrap: wrap` y
     partía la tarjeta en tres alturas (icono / texto / botón). */
  #product .mhp-ventajas-caja .mhp-ventaja { flex-wrap: nowrap; align-items: center; gap: 8px; }
  #product .mhp-ventajas-caja .mhp-ventaja-txt { flex: 1 1 auto; min-width: 0; }
  #product .mhp-ventajas-caja .mhp-ventaja-anadir { margin-left: auto; }

  /* ---------- 9. DESCRIPCIÓN: 3 LÍNEAS DE VERDAD ----------
     `-webkit-line-clamp` no recorta nada cuando el texto viene en <p>/<ul>
     (recorta líneas, no bloques): se veía entero y el "Ver más" acababa
     montado encima del stock. Se recorta por altura y el botón va centrado. */
  #product #short_description_content.mhp-desc-recortada {
    display: block;
    -webkit-line-clamp: none;
    line-height: 1.5;
    max-height: 4.5em; /* 3 líneas exactas */
    overflow: hidden;
  }
  #product #short_description_content.mhp-desc-recortada > *:first-child { margin-top: 0; }
  #product #short_description_content.mhp-desc-recortada > *:last-child { margin-bottom: 0; }
  #product .mhp-ver-mas-desc {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    text-align: center;
  }
  /* dentro de la caja de compra, la descripción y lo que va debajo del stock
     (sellos + código de barras) respiran como un bloque más */
  #product .box-info-product > #short_description_block { padding: 10px 12px 0; }
  #product .box-info-product > .product_attributes { padding: 0 12px; }
  #product .box-info-product > .product_attributes #producto_properties_p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
  }
  #product .box-info-product > .mhp-ficha-meta-abajo { margin: 6px 0 0; padding: 0 12px 10px; }

  /* ---------- 10. MÁS INFORMACIÓN: SOLO DESPLEGABLES ----------
     Fuera el botón "Ver composición, modo de empleo y presentación": cada
     bloque (reseñas incluidas) ya es su propio desplegable. */
  #product #mhp-detalles .mhp-abrir-detalles { display: none; }
}