.liam-menu-container{
  display:flex;
  width:100%;
  margin-bottom:25px;
  font-family:'Poppins',sans-serif;
}
.liam-menu-container *,.liam-menu-container *::before,.liam-menu-container *::after{box-sizing:border-box}

.liam-menu-custom{
  background-color:#7A0000;
  border-radius:50px;
  padding:12px 25px;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
  display:flex;
  max-width:100%;
  overflow-x:auto;
  -ms-overflow-style:none;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.liam-menu-custom::-webkit-scrollbar{display:none}

.liam-menu-custom ul{
  list-style-type:none;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-direction:row;
  gap:0;
  align-items:center;
  width:max-content;
}

.liam-menu-custom li{display:flex;align-items:center}

.liam-menu-custom li:not(:last-child):after{
  content:"";
  display:inline-block;
  width:1px;
  height:20px;
  background-color:rgba(234,162,33,.4);
  margin:0 18px;
  flex-shrink:0;
}

.liam-menu-custom a{
  text-decoration:none;
  color:#ffffff;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:14px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  transition:color .25s ease;
  white-space:nowrap;
}

.liam-menu-icon-circle{
  width:34px;
  height:34px;
  border-radius:50%;
  background-color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background-color .25s ease;
}
.liam-menu-icon-circle svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:#7D1C1C;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .25s ease;
  flex-shrink:0;
}

@media(max-width:560px){
  .liam-menu-custom{padding:10px 16px}
}

/* ---- Cuadro de imagen que se despliega al pasar el cursor ---- */
/* !important en toda la cadena de ancestros: algunos temas de WordPress
   le ponen "overflow:hidden" a los enlaces (a) o a los <li> para efectos
   de hover, y eso recorta el cuadro. Forzamos "visible" en cada nivel
   para que ese overflow del tema no gane. */
.liam-menu-container,
.liam-menu-custom ul,
.liam-menu-custom li,
.liam-menu-custom a{
  overflow:visible !important;
}
.liam-menu-custom{
  overflow-x:auto !important; /* se mantiene igual que antes: scroll horizontal en móvil */
  overflow-y:visible !important;
}

.liam-menu-texto{
  position:relative;
  display:inline-block;
  overflow:visible !important;
}

.liam-menu-dropdown{
  position:absolute;
  top:calc(100% + 14px);
  left:0;
  width:100%; /* siempre igual al ancho del texto, nunca sobresale */
  height:130px; /* valor por defecto; lo controla "Alto de la imagen" en Elementor */
  background-color:#ffffff;
  border-radius:12px;
  overflow:hidden; /* este SÍ debe quedar así: recorta la imagen a las esquinas redondeadas del cuadro, no afecta a los padres */
  box-shadow:0 14px 30px rgba(0,0,0,.25);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease;
  z-index:9999;
  pointer-events:none;
}

.liam-menu-custom li:hover .liam-menu-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Cada imagen es un "slide" apilado sobre los demás; solo el que tiene
   la clase .is-active se ve. El JS (menu.js) va turnando esa clase de
   una imagen a otra mientras el cursor sigue encima de la categoría. */
.liam-menu-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .5s ease;
}
.liam-menu-slide.is-active{
  opacity:1;
}

.liam-menu-dropdown img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}