/* =========================================
   PURA STORE - SUBMENU DESKTOP
   ========================================= */

/* PANEL */
#cbp-hrmenu .cbp-hrsub .mega-store,
#cbp-hrmenu .cbp-hrsub .mega-store *{
  box-sizing: border-box !important;
}

#cbp-hrmenu .cbp-hrsub{
  background: #f8f8f8 !important;
  width: 1040px !important;
  left: 50% !important;
  border-radius: 22px !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.34),
    0 8px 24px rgba(0,0,0,.16) !important;
  overflow: visible !important;

  opacity: 0 !important;
  transform: translateX(-50%) translateY(10px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}

#cbp-hrmenu .cbp-hropen .cbp-hrsub,
#cbp-hrmenu .cbp-hrsub.cbp-show{
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

#cbp-hrmenu .cbp-hrsub-inner{
  border-radius: 22px !important;
  overflow: visible !important;
}

#cbp-hrmenu .cbp-hrsub::before,
#cbp-hrmenu .cbp-hrsub-inner::before{
  content: none !important;
  display: none !important;
}

#cbp-hrmenu .cbp-hrsub .cbp-menu-column-inner{
  width: 100% !important;
}

/* CONTENEDOR */
#cbp-hrmenu .cbp-hrsub .mega-store{
  position: relative !important;
  width: 100% !important;
  padding: 24px 28px !important;
}

/* INTRO */
#cbp-hrmenu .cbp-hrsub .mega-store h3{
  margin: 0 0 6px 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #3f3f46 !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-intro > p{
  margin: 0 0 8px 0 !important;
  color: #52525b !important;
  opacity: .78 !important;
}

/* GRID */
#cbp-hrmenu .cbp-hrsub .mega-store-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: start !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-col{
  min-width: 0 !important;
  position: relative !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-col + .mega-store-col{
  border-left: 1px solid rgba(0,0,0,.08) !important;
  padding-left: 24px !important;
}

/* TITULOS DE COLUMNA */
#cbp-hrmenu .cbp-hrsub .mega-store-col h4{
  margin: 0 0 8px 0 !important;
  padding-bottom: 8px !important;
  position: relative !important;

  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0ea5e9 !important;
  letter-spacing: .2px !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-col h4::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 42px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: rgba(14,165,233,.55) !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-subtitle{
  margin: 0 0 10px 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #6b7280 !important;
}

/* LISTAS */
#cbp-hrmenu .cbp-hrsub .mega-store ul,
#cbp-hrmenu .cbp-hrsub .mega-store li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: transparent !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store ul li::before,
#cbp-hrmenu .cbp-hrsub .mega-store ul li:before{
  content: none !important;
  display: none !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-list li{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;

  width: max-content !important;
  max-width: 100% !important;

  margin: 0 0 2px 0 !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;

  color: #4b5563 !important;
  transition: transform .18s ease, background .18s ease !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-list li i{
  width: 12px !important;
  min-width: 12px !important;
  flex: 0 0 12px !important;
  font-size: 11px !important;
  color: #22a3f0 !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-list li:hover{
  background: #eef7fb !important;
  transform: translateX(4px) !important;
  z-index: 50 !important;
}

/* TOOLTIPS */
#cbp-hrmenu .cbp-hrsub .mega-store-list li[data-tip]::after{
  content: attr(data-tip) !important;
  position: absolute !important;
  left: calc(100% + 10px) !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(-4px) !important;

  padding: 7px 11px !important;
  border-radius: 10px !important;
  background: #e53935 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(229,57,53,.30) !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;

  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
  z-index: 90 !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-list li[data-tip]::before{
  content: "" !important;
  position: absolute !important;
  left: calc(100% + 5px) !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(45deg) !important;

  width: 8px !important;
  height: 8px !important;
  background: #e53935 !important;

  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .14s ease !important;
  z-index: 89 !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-list li[data-tip]:hover::after,
#cbp-hrmenu .cbp-hrsub .mega-store-list li[data-tip]:hover::before{
  opacity: 1 !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-list li[data-tip]:hover::after{
  transform: translateY(-50%) translateX(0) !important;
}

/* BANNER INFERIOR */
#cbp-hrmenu .cbp-hrsub .mega-store-banner{
  margin-top: 18px !important;
}

#cbp-hrmenu .cbp-hrsub .mega-store-banner img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.14) !important;
}

/* RESPONSIVE */
@media (max-width: 1200px){
  #cbp-hrmenu .cbp-hrsub{
    width: 94vw !important;
  }

  #cbp-hrmenu .cbp-hrsub .mega-store-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  #cbp-hrmenu .cbp-hrsub .mega-store-col + .mega-store-col{
    border-left: none !important;
    padding-left: 0 !important;
  }

  #cbp-hrmenu .cbp-hrsub .mega-store-list li[data-tip]::after,
  #cbp-hrmenu .cbp-hrsub .mega-store-list li[data-tip]::before{
    display: none !important;
  }
}

/* ===== BANNER STORE ===== */

.mega-store-banner{
    position: relative;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 18px;
  }
  
  /* imagen */
  .mega-store-banner img{
    width: 100%;
    display: block;
    border-radius: 18px;
  }
  
  /* texto */
  .mega-store-banner{
    position: relative;
    overflow: hidden;
  }

  .mega-store-banner::before{

    content:"";
    position:absolute;
  
    left:0;
    top:0;
    bottom:0;
  
    width:45%;
  
    background:rgba(0,0,0,.65);
  
    clip-path: polygon(
      0 0,
      75% 0,
      100% 100%,
      0% 100%
    );
  
    z-index:1;
  
  }

  .mega-store-banner-text{

    position:absolute;
    left:40px;
    top:50%;
  
    transform:translateY(-50%);
  
    z-index:2;
  
    font-size:50px;
    font-weight:900;
    line-height:.95;
    letter-spacing:-2px;
  
    color:#fff;
  
    text-shadow:
      0 4px 10px rgba(0,0,0,.35),
      0 15px 35px rgba(0,0,0,.55);
  
  }

  .mega-store-banner::after{

    content:"";
    position:absolute;
  
    left:0;
    top:0;
    bottom:0;
  
    width:48%;
  
    clip-path: polygon(
      0 0,
      75% 0,
      100% 100%,
      0% 100%
    );
  
    background:transparent;
  
    box-shadow: 
      35px 0 45px rgba(0,0,0,.35);
  
    z-index:1;
    pointer-events:none;
  
  }

  /* FIX padding títulos del theme */

#cbp-hrmenu .mega-store h4{
    padding: 15px 0 8px 0 !important;
    margin: 0 0 8px 0 !important;
  }