/* Menú inferior: solo celular. */
.dlpmi { display: none; }
@media (max-width: 767px) {
  .dlpmi { position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 9995; display: flex; gap: 4px; height: 60px; padding: 6px; background: color-mix(in srgb, var(--dlp-nav, #fff) 96%, transparent); border-radius: 22px; box-shadow: 0 10px 28px rgba(0,0,0,.2), 0 0 0 1px var(--dlp-line, rgba(0,0,0,.05)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .dlpmi-it { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin: 0; padding: 0; border: 0; border-radius: 17px; background: transparent; color: var(--dlp-mut, #8d8d96); font: 700 9px/1 "Open Sans", system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .2s; }
  .dlpmi-it svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .dlpmi-it:hover, .dlpmi-it:focus { color: var(--dlp-mut, #8d8d96); text-decoration: none; }
  .dlpmi-it.is-on, .dlpmi-it.is-on:hover, .dlpmi-it.is-on:focus { background: var(--dlp-mi-on, var(--dlp-menu-inferior-color-activo, #111)); color: var(--dlp-btn-tx, #fff); }
  .dlpmi-bd { position: absolute; top: 3px; left: 50%; margin-left: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--dlp-mi-badge, var(--dlp-menu-inferior-color-insignia, #111)); color: #fff; box-shadow: 0 0 0 2px var(--dlp-nav, #fff); font: 800 11px/20px "Open Sans", system-ui, sans-serif; text-align: center; font-style: normal; }
  .dlpmi-bd[hidden] { display: none; }
  /* Se oculta el botón flotante del carrito lateral (el menú inferior lo reemplaza) y se deja espacio al final */
  .xoo-wsc-basket { display: none !important; }
  body.dlpmi-on { padding-bottom: 88px; }
  /* Footer de Divi oculto en celular (el menú inferior lo reemplaza) */
  body.dlp-mi-footer--ocultar #main-footer, body.dlp-mi-footer--ocultar .et-l--footer { display: none !important; }
}