/* ===== MS Mobile Bottom Menu (base) ===== */
.msmbm-bar{
  position:fixed;left:0;right:0;bottom:0;
  z-index:var(--msmbm-z);
  background:var(--msmbm-bg);
  color:var(--msmbm-tx);
  border-top:1px solid rgba(0,0,0,.12);
  display:flex;justify-content:space-around;align-items:center;
  padding:10px 6px;
  font-family:inherit;
}

.msmbm-item{
  flex:1;text-align:center;text-decoration:none;
  color:var(--msmbm-tx);
  font-size:12px;line-height:1.1;
  -webkit-tap-highlight-color: transparent;
}
.msmbm-ico{display:block;margin:0 auto 4px; width:22px;height:22px;}
.msmbm-item:active{opacity:.75}

/* Para que el contenido no quede tapado por la barra */
body{ padding-bottom:70px; }

/* Overlay base */
.msmbm-overlay{
  position:fixed;inset:0;
  z-index:calc(var(--msmbm-z) + 1);
  background:rgba(0,0,0,.55);
  display:none;
}
.msmbm-overlay.is-open{display:block;}

/* ===== ESTILO POPUP (cajita como el ejemplo) ===== */
.msmbm-overlay .msmbm-panel{
  position: fixed;
  left: auto;
  right: 14px;
  bottom: 78px;
  width: min(280px, calc(100vw - 28px));
  max-height: 60vh;
  overflow: auto;

  background: #fff;
  border-radius: 16px;
  padding: 8px 0;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* Ocultar botón cerrar grande (se cierra tocando fuera) */
.msmbm-overlay .msmbm-close{ display:none; }

.msmbm-overlay .msmbm-panel ul{ list-style:none; margin:0; padding:0; }
.msmbm-overlay .msmbm-panel li{ border-bottom:1px solid #eee; }
.msmbm-overlay .msmbm-panel li:last-child{ border-bottom:none; }
.msmbm-overlay .msmbm-panel a{
  display:block;
  padding:14px 16px;
  text-decoration:none;
  color:#111;
  font-size:16px;
}
.msmbm-overlay .msmbm-panel a:active{
  background: rgba(0,0,0,.05);
}

/* Ocultar en escritorio (se mostrará al achicar ventana) */
@media (min-width: 769px){
  .msmbm-bar,.msmbm-overlay{display:none !important;}
  body{padding-bottom:0 !important;}
}


/* ===== Submenús tipo jerarquía + acordeón ===== */
.msmbm-panel li { position: relative; }

/* Ocultar submenús por defecto */
.msmbm-panel .sub-menu{
  display:none;
  padding-left: 14px;
  margin: 0;
}

/* Mostrar cuando el padre está abierto */
.msmbm-panel li.msmbm-open > .sub-menu{
  display:block;
}

/* Estilo para links de subniveles */
.msmbm-panel .sub-menu a{
  font-size: 15px;
  padding: 12px 16px;
  opacity: .95;
}

/* Indent visual adicional por nivel */
.msmbm-panel .sub-menu .sub-menu{
  padding-left: 16px;
}

/* Flechita para items con hijos */
.msmbm-panel .menu-item-has-children > a{
  padding-right: 42px; /* espacio para flecha */
}

/* Flecha (chevron) */
.msmbm-panel .menu-item-has-children > a::after{
  content: "";
  position:absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .18s ease;
}

/* Flecha cuando está abierto */
.msmbm-panel li.msmbm-open.menu-item-has-children > a::after{
  transform: translateY(-50%) rotate(-135deg);
}

/* Separadores más suaves dentro de submenú */
.msmbm-panel .sub-menu li{
  border-bottom: 1px solid #f1f1f1;
}
.msmbm-panel .sub-menu li:last-child{
  border-bottom: none;
}

/* Flecha: que se posicione respecto al <a>, no al alto total del <li> */
.msmbm-panel .menu-item-has-children > a{
  position: relative;            /* CLAVE */
  padding-right: 42px;
}

/* Flecha */
.msmbm-panel .menu-item-has-children > a::after{
  content: "";
  position: absolute;            /* ahora es relativo al <a> */
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .18s ease;
}

/* Flecha cuando está abierto */
.msmbm-panel li.msmbm-open.menu-item-has-children > a::after{
  transform: translateY(-50%) rotate(-135deg);
}

/* Línea separadora entre el item padre y su submenú */
.msmbm-panel li.msmbm-open > ul.sub-menu{
  border-top: 1px solid #eee;
}

/* Opcional: un poquito menos de aire para que se vea más “pegado” */
.msmbm-panel li.msmbm-open > ul.sub-menu li a{
  padding-top: 12px;
  padding-bottom: 12px;
}


/*NUEVO CODIGO PARTE 4*/

.msmbm-size-wrap{
  padding: 14px 16px;
  border-top: 1px solid #eee;
}

.msmbm-size-title{
  display:block;
  font-size: 14px;
  opacity: .8;
  margin-bottom: 8px;
}

.msmbm-size-select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #fff;
}

/* ==============================
   Size picker (Tallas) - look & width
   ============================== */

.msmbm-size-picker-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.msmbm-size-label{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* El selector NO ocupa 100% */
.msmbm-size-select{
  width: 65%;              /* ✅ entre 50% y 70% */
  max-width: 240px;        /* ✅ evita que se estire mucho en pantallas grandes */
  min-width: 160px;

  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.2;

  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  background: #fff;
  color: var(--msmbm-tx);

  outline: none;
  appearance: auto;
}

/* En pantallas MUY angostas, un poquito más ancho para que sea usable */
@media (max-width: 360px){
  .msmbm-size-select{
    width: 70%;
    min-width: 140px;
  }
}

/* Si quieres que se vea más “premium” al enfocar */
.msmbm-size-select:focus{
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}