/* ==========================================================
   Kupeki: colores de marca y arreglos del móvil
   Morado #651080 · Rosa #dd2f79 · Naranja #f09700
   ========================================================== */

:root {
  --kpk-morado: #651080;
  --kpk-morado-oscuro: #4c0c60;
  --kpk-rosa: #dd2f79;
  --kpk-naranja: #f09700;
}

/* ---------- Barra de "Gastos de envío gratuitos" ---------- */
#top-banner-module,
#top-banner-module > * {
  background: linear-gradient(90deg, var(--kpk-morado), var(--kpk-rosa)) !important;
  color: #fff !important;
}

/* ---------- Menú principal (escritorio) ---------- */
.menu_and_cattree {
  background-color: var(--kpk-morado) !important;
}
@media (min-width: 768px) {
  .menu_and_cattree .mm_menus_ul > li > a,
  .menu_and_cattree .mm_menus_ul > li > span,
  .menu_and_cattree .mm_menus_ul > li > a *,
  .menu_and_cattree .mm_menus_ul > li > span * {
    color: #fff !important;
  }
  .menu_and_cattree .mm_menus_ul > li:hover {
    background-color: var(--kpk-rosa) !important;
  }
}

/* ---------- Precios y botones ---------- */
.product-price-and-shipping .price,
.product-prices .current-price,
.product-prices .current-price span {
  color: var(--kpk-rosa) !important;
}

.btn-primary,
.add-to-cart,
.search-widget form button[type="submit"] {
  background-color: var(--kpk-rosa) !important;
  border-color: var(--kpk-rosa) !important;
  color: #fff !important;
}
.btn-primary:hover,
.add-to-cart:hover,
.search-widget form button[type="submit"]:hover {
  background-color: var(--kpk-morado) !important;
  border-color: var(--kpk-morado) !important;
}

/* El buscador lleva el borde a juego */
.search-widget form input[type="text"] {
  border-color: var(--kpk-rosa) !important;
}

/* ---------- Etiqueta "FDM" en los productos ---------- */
.product-tag {
  display: none !important;
}

/* ==========================================================
   MÓVIL
   ========================================================== */
@media (max-width: 767px) {

  /* 1. Volver a mostrar el logo (el módulo kpk_heromobile lo ocultaba) */
  .mobile_logo {
    display: block !important;
  }
  #_mobile_logo > a {
    padding: 12px 0 !important;
  }
  #_mobile_logo img.logo {
    max-height: 56px;
    width: auto;
  }

  /* 2. Quitar la barra vacía de "Mi cuenta": su ☰ se confundía con el del catálogo.
        Pasa a ser un icono de persona en la esquina, a la altura del logo. */
  #header .header_content {
    position: relative;
  }
  #header .header-nav {
    position: absolute !important;
    top: 0;
    right: 0;
    left: auto;
    border: 0 !important;
    background: transparent !important;
    padding: 18px 8px 0 0 !important;
  }
  #header .header-nav .toogle_nav i.menu {
    font-size: 0 !important;
  }
  #header .header-nav .toogle_nav i.menu::before {
    content: "person";
    font-family: "Material Icons";
    font-size: 28px;
    color: var(--kpk-morado);
  }

  /* 3. Quitar el bloque morado vacío de la portada
        y enseñar en su lugar el carrusel de fotos del escritorio */
  .kupeki-hero-mobile {
    display: none !important;
  }
  .ets_multilayerslider {
    display: block !important;
  }
}